AngularJS ng-keyup Directive
The ng-keyup Directive in AngluarJS is used to apply custom behavior on a keyup event. It is supported by <input>, <select> and <textarea> elements.
Syntax:
<element ng-keyup="expression"> Contents... </element>
Parameter:
- expression: When a keypress is finished, then the followed expression will be executed.
Example 1: This example uses ng-keyup Directive to change the background color when key up and down the button.
HTML
<!DOCTYPE html><html><head> <title>ng-keyup Directive</title> <script src= </script> <style type="text/css"> .keyDown { background-color: yellow; color: black; } .keyUp { background-color: green; color: white; } </style></head><body ng-app style="text-align:center"> <h1 style="color:green"> GeeksforGeeks </h1> <h2>ng-keyup Directive</h2> <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]" /> <br> </div></body></html> |
Output:
Example 2: This example uses the ng-keyup Directive to change the font-color, font-family & font-size when key up and down the button.
HTML
<!DOCTYPE html><html><head> <title>ng-keyup Directive</title> <script src= </script> <style type="text/css"> .keyDown { font-family: 'Times New Roman', Times, serif; font-size: 7px; } .keyUp { font-family: Arial; font-size: 35px; color: green; } </style></head><body ng-app style="text-align:center"> <h1 style="color:green"> GeeksforGeeks </h1> <h2>ng-keyup Directive</h2> <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]" /> <br> </div></body></html> |
Output:
Please Login to comment...