How to detect pressed keys on the click of AngularJS
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
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);