Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

AngularJS | ng-keydown Directive

  • Last Updated : 26 Mar, 2019

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.


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

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

<!DOCTYPE html>
    <title>ng-keydown Directive</title>
    <script src=
    <style type="text/css">
        .keyDown {
            background-color: green;
            color: white;
        .keyUp {
            background-color: white;
<body ng-app style="text-align:center">
    <h1 style="color:green">
    <h2>ng-keydown Directive</h2>
        <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]" />

Before pressing the button:
After pressing the button:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!