Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

AngularJS | ng-keypress Directive

  • Last Updated : 26 Mar, 2019

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.


<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.

<!DOCTYPE html>
    <title>ng-keypress Directive</title>
    <script src=
    <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('geek', function ($scope) {
            $scope.getkeys = function (event) {
                $scope.keyval = event.keyCode;
<body style="text-align:center">
    <div ng-app="app" ng-controller="geek">
        <h1 style="color:green">
        <h2>ng-keypress Directive</h2>
        Enter Text: <input type="text"
                ng-keypress="getkeys($event)" >
        <span style="color:Red">
            Key Code: {{keyval}}


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!