Open In App

AngularJS ng-keydown Directive

Improve
Improve
Like Article
Like
Save
Share
Report

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:

 



Last Updated : 16 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads