The ng-keydown Directive in AngluarJS is used to apply custom behavior on a keydown event. This directive will not be overridden by the element’s original onkeydown event. Both the onkeydown event & the ng-keydown Directive will be executed. It is supported by <input>, <select> and <textarea> elements.
Syntax:
<element ng-keydown="expression">
Contents...
</element>Parameter:
- expression: It specifies the expression will be executed when the key is pressed.
Example: This example uses the ng-keydown Directive to change the background color after pressing the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ng-keydown Directive</title>
<script src=
</script>
<style type="text/css">
.keyDown {
background-color: green;
color: white;
}
.keyUp {
background-color: white;
}
</style>
</head>
<body ng-app style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>ng-keydown Directive</h3>
<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]" />
</div>
</body>
</html>
|
Output:
Example 2: This example uses the ng-keydown Directive to change the font-size when the key down button is pressed.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ng-keydown Directive</title>
<script src=
</script>
<style type="text/css">
.keyDown {
font-family: 'Times New Roman', Times, serif;
font-size: 17px;
}
</style>
</head>
<body ng-app style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>ng-keydown Directive</h3>
<div>
<b>Enter Name: </b>
<input type="text"
ng-model="searchValue"
ng-keydown="keyDown=true"
ng-class="{true:'keyDown'}[keyDown]" />
</div>
</body>
</html>
|
Output: