AngularJS ng-keyup Event with Example

Here we will learn what is ng-keyup event in angularjs, how to use ng-keyup event in angularjs, get key code of key pressed in angularjs applications with example.

AngularJS ng-keyup Event Directive

In angularjs ng-keyup event directive is used to raise or call events / custom functions on keyup event. The ng-keyup event will call custom events / functions on keyup (once we press and release key in keyboard).

 

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

Syntax of AngularJS ng-keyup Event

Following is the syntax of using angularjs ng-keyup event directive in applications.

 

<element ng-keyup="expression">

--Your Code--

</element>

The ng-keyup event in angularjs will execute expression on key up and it will support <input>, <select>, <textarea> elements. 

 

The angularjs ng-keyup event will not override onkeyup event of html elements both will execute separately.

Example of AngularJS ng-keyup Event

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

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-keyup 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('ngkeyupApp', []);

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

$scope.getkeys = function (event) {

$scope.keyval = event.keyCode;

}

});

</script>

</head>

<body>

<div ng-app="ngkeyupApp" ng-controller="ngkeyupCtrl">

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

Enter Text: <input type="text" ng-keyup="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-keyup 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-keyup Event Example

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

 

AngularJS ng-keyup event example result or output

 This is how we an use ng-keyup event in angularjs applications to call or raise custom events or function on keyup event.