LearnKode

6 Example(s) of Ng-Keydown


Description :

Ng-keydown will increase the count by 1 when everytime we will press the key in textbox.


Ng-Keydown Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        Text: <input type="text" ng-model="text" ng-keydown="count=count+1" /><br />
        KeyDown Count: {{count}}
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this we can filter student name on ng-keydown directive.When we type in textbox its value bind to the searchValue variable and its value compare to dropdown value.


Ng-Keydown Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="clickExample">
    <div ng-controller="ExampleController">
        <b>Search: </b><input type="text" ng-model="searchValue" ng-keydown="val=searchValue" /><br />
        Select Student: <select size="5" ng-model="name" ng-options="p.name as p.name for  p in students | filter:val">{{student.name}}</select>
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.students = [{ name: 'John' }, { name: 'Smith' }, { name: 'Allen' }, { name: 'Johnson' }, { name: 'Harris' }, { name: 'Williams' }, { name: 'David' }];
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

On ng-keydown directive KeyDown value is set to true.For true value of expression KeyDown class is apply otherwise keyUp class is apply.


Ng-Keydown Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <style type="text/css">
        .keyDown {
            background-color: #e45959;
        }

        .keyUp {
            background-color: #f1fa1d;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <b>Text: </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>
Try it » Download Example »

Output

Description :

When we type in textbox ng-keydown directive will call the lowerCase(text) function which convert the uppercase character to lowercase.


Ng-Keydown Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="clickExample">
    <div ng-controller="ExampleController">
        Upper Case: <input type="text" ng-model="text" ng-keydown="lowerCase(text)" /><br />
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.lowerCase = function (txt) {
            $scope.text = txt.toLocaleLowerCase();
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

For true value of keyDown variable ng-class keyDown will apply.


Ng-Keydown Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
    .keyDown {
        background-color: red;
    }
</style>
</head>
<body ng-app>
    <div>
        Text: <input type="text" ng-model="text" ng-class="{true:'keyDown'}[keyDown]" ng-keydown="keyDown=true" /><br />
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of Ng-Keydown, We have added validation on key down of text boxes. Textbox is used to get the age of user so if user will enter value other then numeric then that will be invalid value. So we added validation on textbox keydown using Ng-Keydown


Ng-Keydown Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="myController">
        <h3>Numeric TextBox Validation on Keydown</h3>
        Age: <input type="text" ng-keydown="isNumeric($event)" />
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('myController', ['$scope', function ($scope) {
        $scope.isNumeric = function (e) {
            if (!((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) || (e.keyCode == 8))) {
                return e.preventDefault();
            }
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output