AngularJS | ng-keydown Directive

The ng-keydown Directive in AngluarJS is used to apply custom behavior on a keydown event. It is supported by <input>, <select> and <textarea> elements.

Syntax:

 <element ng-keydown="expression"> Contents... </element>

Example: This example uses ng-keydown Directive to change the background color after pressing the button.

<!DOCTYPE html> 
<html> 
      
<head> 
    <title>ng-keydown 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: green; 
            color: white; 
        } 
        .keyUp { 
            background-color: white; 
        } 
    </style> 
</head> 
  
<body ng-app style="text-align:center"> 
      
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <h2>ng-keydown 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:
Before pressing the button:
ngkeydown
After pressing the button:

My Personal Notes

Recommended Posts:

Vishal Chaudhary 2

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.