Open In App

AngularJS ng-keypress Directive

Improve
Improve
Like Article
Like
Save
Share
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=
    </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=
    </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



Last Updated : 24 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads