Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

AngularJS | ng-keyup Directive

  • Last Updated : 31 Aug, 2021

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>

Example: This example uses ng-keyup Directive to change the background color when key up and down the button.  

html




<!DOCTYPE html>
<html>
     
<head>
    <title>ng-keyup Directive</title>
     
    <script src=
    </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: 
When key is down:  

ngkeyup



When key is up:  

ngkeyup

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!