AngularJS ng-keydown Directive
The ng-keydown Directive in AngluarJS is used to apply custom behavior on a keydown event. This directive will not be overridden by the element’s original onkeydown event. Both the onkeydown event & the ng-keydown Directive will be executed. It is supported by <input>, <select> and <textarea> elements.
Syntax:
<element ng-keydown="expression">
Contents...
</element>Parameter:
- expression: It specifies the expression will be executed when the key is pressed.
Example: This example uses the ng-keydown Directive to change the background color after pressing the button.
HTML
<!DOCTYPE html><html> <head> <title>ng-keydown Directive</title> <script src= </script> <style type="text/css"> .keyDown { background-color: green; color: white; } .keyUp { background-color: white; } </style></head> <body ng-app style="text-align:center"> <h1 style="color:green"> GeeksforGeeks </h1> <h3>ng-keydown Directive</h3> <div> <b>Enter Name: </b> <input type="text" ng-model="searchValue" ng-keydown="keyDown=true" ng-keyup="keyDown=false" ng-class="{true:'keyDown', false:'keyUp'}[keyDown]" /> </div></body></html> |
Output:
Example 2: This example uses the ng-keydown Directive to change the font-size when the key down button is pressed.
HTML
<!DOCTYPE html><html> <head> <title>ng-keydown Directive</title> <script src= </script> <style type="text/css"> .keyDown { font-family: 'Times New Roman', Times, serif; font-size: 17px; } </style></head> <body ng-app style="text-align:center"> <h1 style="color:green"> GeeksforGeeks </h1> <h3>ng-keydown Directive</h3> <div> <b>Enter Name: </b> <input type="text" ng-model="searchValue" ng-keydown="keyDown=true" ng-class="{true:'keyDown'}[keyDown]" /> </div></body></html> |
Output:
Please Login to comment...