Introduction:

In this article we will learn how to Use ng- keypress events directive in AngularJS or what is ng- keypress events directive in AngularJS or how to use ng- keypress events directive in AngularJS with example

Description:  

In angularjs ng-keypress event directive is used to raise events or execute custom functions or method immediately on key press in keyboard. 

if you want to raise an event on key press or call some custom functions immediately on key press in angularjs that better to use ng-keypress event.

The ng-keypress event in angularjs will execute expression whenever key is pressed and it will support <input>, <select>, <textarea> elements.

The ng-keypress directive from AngularJS will not override the element's original onkeypress event, both will be executed.

 

Syntax of AngularJS ng-keypress Event


Following is the syntax of using angularjs ng-keypress event directives in applications.

 

<element ng-keypress ="expression"></element>

 

 Let’s see an example of  ng-keyup events  in AngularJS

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AngularJS.aspx.cs"
Inherits="AngularJSTutorials.AngularJS" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script>
        var app = angular.module("app", []);
        app.controller("KeyController", function ($scope) {           
            $scope.KeyPress = function () {
                $scope.keypress = " Key press executes " + new Date();
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="app" ng-controller="KeyController">
            <p>Try writing something in the textbox below</p>            
            Key Press:<input type="text"ng-keypress="KeyPress()" /><br />           
            <hr />           
            <p>Key Press - {{ keypress }}</p>
        </div>
    </form>
</body>
</html>

 

In above code HTML block, we have declared a text box with ng-keypress directive that calls KeyPress() function respectively. When user key press to writing something in the text box, respective event executes and writes the message below in the paragraph.

Output:



I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.