How to detect pressed keys on the click of AngularJS

Question

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?

score 36 · Answer 1 · answered Apr 23 '15 at 11:57

36

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){}
}

answered Apr 23 '15 at 11:57

Flavien Volken

19,196
12
100
133

1

Much simpler than all other alternatives. Worked perfectly when I needed to check the Ctrl key – Martín Coll Mar 16 '16 at 00:47
1

Note: ctrlKey will not work as expected on mac, as this triggers a context menu. Mac uses the command key for this. – PMBjornerud Mar 22 '16 at 10:01
1

@PMBjornerud how do you detect the command key then. can you post a code snippet or something. thanks – Harshit Gupta Nov 03 '16 at 20:28
1

I don't have the code I used at the moment. Maybe here?: http://stackoverflow.com/questions/3902635/how-does-one-capture-a-macs-command-key-via-javascript – PMBjornerud Nov 07 '16 at 14:21
Can we do this with ng-change, my ng-change is detecting a change, but with that I want to check if the ng-change is triggered with ctrl key clicked, so that I can open in new tab. – Nagendra Singh Sep 16 '18 at 04:57

Nidhish Krishnan · Accepted Answer · 2014-05-14T10:42:50.360

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");
    };
  });

Perfect, that it, working perfectly, just have to add $event. Thanks — Flavio CF Oliveira, May 14 '14 at 10:39

score 6 · Answer 3 · answered May 14 '14 at 10:32

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);

score 6 · Answer 4 · answered Jan 05 '15 at 20:28

6

If you are trying to capture a key combination, such as Ctrl-Enter, you can look at the window object

For example to find Ctrl-Enter use

if(window.event.keyCode == 13 && window.event.ctrlKey == true)

answered Jan 05 '15 at 20:28

Victor Grazi

15,563
14
61
94

1

For angular you should use `$event` instead of `window.event`. – AJ Richardson Oct 06 '15 at 20:22

score 2 · Answer 5 · answered Oct 23 '15 at 15:22

Since I'm not sure what each browser provides, I would do it this way:

shiftPressed = event.shiftKey || (event.keyCode === 16);

On Chorme for example I can't see any event.keyCode on the click event:

altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 753
clientY: 193
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isDefaultPrevented: ()
isImmediatePropagationStopped: ()
isTrusted: true
isTrusted: true
layerX: 4
layerY: -15
metaKey: false
movementX: 0
movementY: 0
offsetX: 4
offsetY: -15
pageX: 1381
pageY: 193
path: Array[16]
relatedTarget: null
returnValue: true
screenX: 753
screenY: 278
shiftKey: true
srcElement: span.glyphicon.glyphicon-plus
stopImmediatePropagation: ()
target: span.glyphicon.glyphicon-plus
timeStamp: 1445613423528
toElement: span.glyphicon.glyphicon-plus
type: "click"
view: Window
webkitMovementX: 0
webkitMovementY: 0
which: 1
x: 753
y: 193

How to detect pressed keys on the click of AngularJS

5 Answers5

Linked