AngularJS
provides various keyboard events to track events raised by user interaction
with the keyboard like KeyDown, KeyUp,
KeyPress etc, in this post we shall see on how to handle the keydown event
using AngularJS
AngularJS provides ng-keydown directive to handle keydown events raised by the user, keydown event can be handled by associating the ng-keydown directive to an event handler function which passes the key event as a parameter.
The following example shows on how to use the ng-keydown directive to handle keydown events raised by the user.
<html ng-app="keyDownApp">
<head>
<meta charset="utf-8">
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('keyDownApp', []);
function keyDownController($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="keyDownController">
<input type="text" ng-keydown="HandleEvent($event)"><br/><br/>
Keydown on Key (KeyCode): {{CurrentKey}} <br/>
Alt Key presses: {{AltKey}} <br/>
Shift Key presses: {{ShiftKey}} <br/>
</div>
</div>
</body>
</html>
AngularJS provides ng-keydown directive to handle keydown events raised by the user, keydown event can be handled by associating the ng-keydown directive to an event handler function which passes the key event as a parameter.
The following example shows on how to use the ng-keydown directive to handle keydown events raised by the user.
<html ng-app="keyDownApp">
<head>
<meta charset="utf-8">
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('keyDownApp', []);
function keyDownController($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="keyDownController">
<input type="text" ng-keydown="HandleEvent($event)"><br/><br/>
Keydown on Key (KeyCode): {{CurrentKey}} <br/>
Alt Key presses: {{AltKey}} <br/>
Shift Key presses: {{ShiftKey}} <br/>
</div>
</div>
</body>
</html>
No comments:
Post a Comment