AngularJS ngKeyup Directive

ng-keyup directive is used to specify the custom behavior that execute when the keyboard is used on the specific HTML element.
In AngularJS, the ng-keyup directive will not override the HTML element’s original onkeyup event, both will be executed.
The ng-keyup directive is executing at the priority level “0”.
ng-keyup is supported by <input>, <select>, <textarea>, and others editable HTML element.

Difference between Keydown, keypress and keyup:

Keydown:

Fires when the user depresses a key.
It repeats while the user keeps the key depressed.

Keypress:

Fires when an actual character is being inserted in, for example, a text input.
It repeats while the user keeps the key depressed.

Keyup:

Fires when the user releases a key, after the default action of that key has been performed.

Syntax for ng-keyup directive in AngularJS:

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

Parameter value for ng-keyup directive in AngularJS:

Value	Description
expression	It is used to define an expression that execute when a keypress is finished.

Sample coding for ng-keyup directive in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
                    angular.min.js"> </script>
    </head>
    <body ng-app="">
        <h2>Wikitechy ng-keyup Directive in AngularJS</h2>
        <input ng-keyup="count = count + 1" ng-init="count=0">
        <h3>The keyup count: {{ count }}</h3>
    </body>
</html>

Code Explanation for ng-keyup directive in AngularJS:

Code Explanation for AngularJS ngKeyup Directive

AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
The AngularJS application is defined by ng-app=" ". The application runs inside the <body> tag. It’s also used to define a <body> tag as a root element.
The ng-keydown= “count=count+1” is used to increase the count variable by one, every time a keypressed in the input field is finished.
The ng-init=”count = 0 “ is used to define the initial value of the count variable is “0”.
The {{ count }} is used to dynamically bind the count variable value when the user press the key in the input field.

Sample Output for ng-keyup directive in AngularJS:

Sample Output for AngularJS ngKeyup Directive

The output displays the content “Welcome To Wikitechyyyyyy” in the text box.
The output shows that the content “The keydown count:23” when the user typed the “Welcome To Wikitechyyyyyy” in the text box. Here the variable “count” will increase the value by 1, every time a keypressed in the text box is finished.

PDF

AngularJS ngKeyup Directive

Difference between Keydown, keypress and keyup:

Keydown:

Keypress:

Keyup:

Syntax for ng-keyup directive in AngularJS:

Parameter value for ng-keyup directive in AngularJS:

Sample coding for ng-keyup directive in AngularJS:

Code Explanation for ng-keyup directive in AngularJS:

Sample Output for ng-keyup directive in AngularJS:

Related Searches to angularjs ngKeyup directive

Wikitechy

Join our Community

Other Languages