Sunday, March 29, 2015

ng-keypress event

AngularJS provides various keyboard events to track events raised by user interaction with the keyboard like Keypress, Keypress, KeyPress etc, in this post we shall see on how to handle the keypress event using AngularJS

AngularJS provides ng-keypress directive to handle keypress events raised by the user, keypress event can be handled by associating the ng-keypress directive to an event handler function which passes the key event as a parameter.

The following example shows on how to use the ng-keypress directive to handle keypress events raised by the user.


<html ng-app="keyPressApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
    <script>
var app = angular.module('keyPressApp', []);

function keyPressController($scope) {
           $scope.HandleEvent = function (keyEvent) {
                $scope.CurrentKey = (window.event ? keyEvent.keyCode : keyEvent.which);
                $scope.AltKey = keyEvent.altKey;
                $scope.ShiftKey = keyEvent.shiftKey;
              };
};
</script>
</head>
<body>
          <div ng-controller="keyPressController">
                   <input type="text" ng-keypress="HandleEvent($event)"><br/><br/>
                   keyPress on Key (KeyCode): {{CurrentKey}} <br/>
                   Alt Key presses: {{AltKey}} <br/>
                   Shift Key presses: {{ShiftKey}} <br/>
                   </div>
          </div>
</body>
</html>




Search Flipkart Products:
Flipkart.com

2 comments:

Friedrich said...

I just found your blog by searching for ASP.NET tutorial. This was a really helpful post. Here I getting knowledge about ASP.NET. The last time I get some knowledge about this from hostforlife ! keep it up.

Friedrich said...

I just found your blog by searching for ASP.NET tutorial. This was a really helpful post. Here I getting knowledge about ASP.NET. The last time I get some knowledge about this from hostforlife ! keep it up.