Menu
I'm using angularjs on a web application that I need to figure out how can I detect is keys like ctrl, shift or alt are pressed when I click somewhere.
For example, with jQuery I can do that by accessing the Click function arguments.
Is there some out-of-the-box way to obtain that information on angular?
634
In plain JavaScript, you can use the EventTarget. addEventListener() method to listen for keyup event. When it occurs, check the keyCode 's value to see if an Enter key is pressed.
The $ in AngularJs is a built-in object.It contains application data and methods.
AngularJS ng-keydown Directive The ng-keydown directive tells AngularJS what to do when the keyboard is used on the specific HTML element. The ng-keydown directive from AngularJS will not override the element's original onkeydown event, both will be executed.
In your html
<button ng-click="doSomething($event)"></button>
In your js
$scope.doSomething = function($event)
{
if ($event.altKey){}
if ($event.ctrlKey){}
if ($event.shiftKey){}
}
Take a look at this beautiful Stuff regarding AngularJS key handling
So key code for Ctrl, shift, alt will be
Ctrl - 17
Alt - 18
Shift - 16
Working Demo
HTML
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="mainModule">
<div ng-controller="mainController">
<label>Type something:
<input type="text"
ng-keydown="onKeyDown($event)"
ng-keyup="onKeyUp($event)"
ng-keypress="onKeyPress($event)" />
</label><br />
<strong>KEY DOWN RESULT:</strong> {{onKeyDownResult}}<br />
<strong>KEY UP RESULT:</strong> {{onKeyUpResult}}<br />
<strong>KEY PRESS RESULT:</strong> {{onKeyPressResult}}
</div>
</body>
</html>
SCRIPT
angular.module("mainModule", [])
.controller("mainController", function ($scope)
{
// Initialization
$scope.onKeyDownResult = "";
$scope.onKeyUpResult = "";
$scope.onKeyPressResult = "";
// Utility functions
var getKeyboardEventResult = function (keyEvent, keyEventDesc)
{
return keyEventDesc + " (keyCode: " + (window.event ? keyEvent.keyCode : keyEvent.which) + ")";
};
// Event handlers
$scope.onKeyDown = function ($event) {
$scope.onKeyDownResult = getKeyboardEventResult($event, "Key down");
};
$scope.onKeyUp = function ($event) {
$scope.onKeyUpResult = getKeyboardEventResult($event, "Key up");
};
$scope.onKeyPress = function ($event) {
$scope.onKeyPressResult = getKeyboardEventResult($event, "Key press");
};
});
There is no "automated" way using pure JS, but it's relatively simple to track modifier keys' state in global variables. E.g.
window.ctrlDown = false;
document.addEventListener('keydown', function(evt) {
var e = window.event || evt;
var key = e.which || e.keyCode;
if(17 == key) {
window.ctrlDown = true;
}
}, false);
document.addEventListener('keyup', function(evt) {
var e = window.event || evt;
var key = e.which || e.keyCode;
if(17 == key) {
window.ctrlDown = false;
}
}, false);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
