AngularJS ng-keypress Directive Last Updated : 24 Aug, 2022 Comments Improve Suggest changes Like Article Like Report 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 <input>, <select> and <textarea> element. Syntax: <element ng-keypress="expression"> Contents... </element>Parameter value: expression: It tells what to do when the key is pressed. Example 1: This example uses the ng-keypress Directive in AngularJS to display key values. HTML <!DOCTYPE html> <html> <head> <title>ng-keypress Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <script type="text/javascript"> var app = angular.module("app", []); app.controller("geek", function ($scope) { $scope.getkeys = function (event) { $scope.keyval = event.keyCode; }; }); </script> </head> <body style="text-align: center"> <div ng-app="app" ng-controller="geek"> <h1 style="color: green"> GeeksforGeeks </h1> <h3>ng-keypress Directive</h3> Enter Text: <input type="text" ng-keypress="getkeys($event)" /> <br /><br /> <span style="color: Red"> Key Code: {{keyval}} </span> </div> </body> </html> Output: Example 2: This example describes the use of the ng-keypress Directive in AngularJS where it displays the total number of counts the key is pressed simultaneously. HTML <!DOCTYPE html> <html> <head> <title>ng-keypress Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <style> body { text-align: center; font-family: sans-serif; } h1 { color: green; } </style> </head> <body ng-app=""> <h1>GeeksforGeeks</h1> <h2>ng-keypress Directive</h2> <textarea ng-keypress="add = add + 1" ng-init="add=0" > </textarea> <p> {{add}} times key is pressed.</p> </body> </html> Output: Reference: https://docs.angularjs.org/api/ng/directive/ngKeypress Comment More infoAdvertise with us Next Article AngularJS ng-keypress Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads 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 t 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-form Directive The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [ 1 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-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 Like