AngularJS | ng-keypress Directive

The ng-keypress Directive in AngluarJS is used to apply custom behavior on a keypress event. It is supported by <input>, <select> and <textarea> element.

Syntax:

<element ng-keypress="expression"> Contents... </element>

Where expression tells what to do when key is pressed.



Example: This example uses ng-keypress Directive to display key value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>ng-keypress Directive</title>
      
    <script src=
    </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>
          
        <h2>ng-keypress Directive</h2>
          
        Enter Text: <input type="text"
                ng-keypress="getkeys($event)" >
          
        <br><br>
          
        <span style="color:Red">
            Key Code: {{keyval}}
        </span>
    </div>
</body>
  
</html>

chevron_right


Output:
ngkeypress



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.