AngularJS ng-keyup Directive
Last Updated :
11 Jul, 2025
Improve
The ng-keyup Directive in AngluarJS is used to apply custom behavior on a keyup event. It is supported by <input>, <select> and <textarea> elements.
Syntax:
<element ng-keyup="expression"> Contents... </element>
Parameter:
- expression: When a keypress is finished, then the followed expression will be executed.
Example 1: This example uses ng-keyup Directive to change the background color when key up and down the button.
<!DOCTYPE html>
<html>
<head>
<title>ng-keyup Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style type="text/css">
.keyDown {
background-color: yellow;
color: black;
}
.keyUp {
background-color: green;
color: white;
}
</style>
</head>
<body ng-app style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>ng-keyup Directive</h2>
<div>
<b>Enter Name: </b>
<input type="text"
ng-model="searchValue"
ng-keydown="keyDown=true"
ng-keyup="keyDown=false"
ng-class=
"{true:'keyDown', false:'keyUp'}[keyDown]" />
<br>
</div>
</body>
</html>
Output:
Example 2: This example uses the ng-keyup Directive to change the font-color, font-family & font-size when key up and down the button.
<!DOCTYPE html>
<html>
<head>
<title>ng-keyup Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style type="text/css">
.keyDown {
font-family: 'Times New Roman', Times, serif;
font-size: 7px;
}
.keyUp {
font-family: Arial;
font-size: 35px;
color: green;
}
</style>
</head>
<body ng-app style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>ng-keyup Directive</h2>
<div>
<b>Enter Name: </b>
<input type="text"
ng-model="searchValue"
ng-keydown="keyDown=true"
ng-keyup="keyDown=false"
ng-class=
"{true:'keyDown', false:'keyUp'}[keyDown]" />
<br>
</div>
</body>
</html>
Output:
