AngularJS ng-keypress Event with Example

Here we will learn what is ng-keypress event directive in angularjs, use of ng-keypress event in angularjs and how to get key code of key pressed using ng-keypress event in angularjs application.

AngularJS ng-keypress Event Directive

In angularjs ng-keypress event directive is used to raise events or execute custom functions immediately on key press in keyboard.

 

The ng-keypress event will raise immediately whenever we press key on keyboard before release itself.

 

Suppose in angularjs if you want to raise an event on key press or call some custom functions immediately on key press it’s better to use ng-keypress event.

Syntax of AngularJS ng-keypress Event

Following is the syntax of using angularjs ng-keypress event directives in applications.

 

<element ng-keypress="expression">

--Your Code--

</element>

The ng-keypress event in angularjs will execute expression whenever key is pressed and it will support <input>, <select>, <textarea> elements.

 

The angularjs ng-keypress event will not override onkeypress event of html elements both will execute separately.

Example of AngularJS ng-keypress Event

Following is the example of getting key code of key pressed in keyboard using ng-keypress event in angularjs application.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-keypress Event with Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('ngkeypressApp', []);

app.controller('ngkeypressCtrl', function ($scope) {

$scope.getkeys = function (event) {

$scope.keyval = event.keyCode;

}

});

</script>

</head>

<body>

<div ng-app="ngkeypressApp" ng-controller="ngkeypressCtrl">

<h2>AngularJS ng-keypress Event Example</h2>

Enter Text: <input type="text" ng-keypress="getkeys($event)" ng-model="ftxt"><br /><br />

<span style="color:Red">Last Key Code: {{keyval}}</span>

</div>

</body>

</html>

If you observe above angularjs ng-keypress event example we are calling function getkeys with $event object as parameter and showing key code of key pressed in keyboard.

Output of AngularJS ng-keypress Event Example

Following is the result of using ng-keypress event in angularjs applications.

 

Angularjs ng-keypress event example result or output

 

 This is how we can use angularjs ng-keypress event to raise or call events whenever key pressed on keyboard in applications.