AngularJS ng-keypress Directive

Last Updated : 11 Jul, 2025

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>