Introduction:

In this article we will learn how to Use ng- keydown events directive in AngularJS or what is ng- keydown events directive in AngularJS or how to use ng- keydown events directive in AngularJS with example

Description:  

In angularjs ng-keydown event directive is used to define events or execute custom functions immediately on key press in keyboard.  

The ng-keydown event will raise immediately whenever we press key on keyboard before release itself. 

in angularjs if you want to raise an event on key press or call some custom functions immediately on key press it’s better to use ng-keydown event.

The ng-keydown event in angularjs will execute expression whenever key is pressed and it will support <input>, <select>, <textarea> elements. 

The angularjs ng-keydown event will not override onkeydown event of html elements both will execute separately.

 

  • Syntax of AngularJS ng-keydown Event

Following is the syntax of using angularjs ng-keydown event directives in applications.

 

<element ng-keydown ="expression"></element>

 

 Let’s see an example of  ng-keydown events  in AngularJS

 


 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AngularJS.aspx.cs"
Inherits="AngularJSTutorials.AngularJS" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script>
        var app = angular.module("app", []);
        app.controller("KeyController", function ($scope) {           
            $scope.keyDown = function () {
                $scope.keydown = " Key keydown executes " + new Date();
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="app" ng-controller="KeyController">
            <p>Try writing something in the textbox below</p>            
            Key down:<input type="text"ng-keypress="keyDown()" /><br />           
            <hr />           
            <p>Key down - {{ keydown }}</p>
        </div>
    </form>
</body>
</html>

 

In above code HTML block, we have declared a text box with ng-keydown directive that calls KeyDown() function respectively. When user key press on keyboard in the text box, respective event executes and writes the message below in the paragraph.

Output:

Use AngularJS ng-keydown Event with Example


I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like