AngularJS ng-keyup Directive Last Updated : 08 Aug, 2022 Comments Improve Suggest changes Like Article Like Report 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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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: Comment More infoAdvertise with us Next Article AngularJS ng-keyup Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-keypress Directive The ng-keypress Directive in AngluarJS is used to apply custom behavior on a keypress event. It is mainly used to specify what to do when the keyboard is utilized with a particular HTML element. The order of sequence that the key is pressed is Keydown, Keypress, and keyup. It is supported by <inp 2 min read AngularJS ng-mouseup Directive The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements. Syntax: 2 min read AngularJS ng-hide Directive The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none. Syntax: <element ng-hide="e 2 min read AngularJS ng-if Directive The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it 2 min read AngularJS ng-href Directive The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will m 2 min read Like