HTML\Javascript - get ATL\CTRL\SHIFT key press

Question

Is there the ability to capture any key press? i.e. Ctrl + Shift + Alt key press (with no other key press).

In the snippet below (checked under Chrome), I am able to capture the shift only when other "regular" key was pressed.

UPDATE:

<html>
<head>
    <script>
        function onKeyPressed(event) {
            event = event || window.event;
            var code = event.keyCode;
            var key = String.fromCharCode(event.keyCode);
            var shift = event.shiftKey;
            var alt = event.altKey;
            var ctrl = event.ctrlKey;
            var which = event.which;
            var str = "code = " + code + "\n" +
                      "key = " + key + "\n" +
                      "shift = " + shift + "\n" +
                      "alt = " + alt + "\n" +
                      "ctrl = " + ctrl + "\n" +
                      "which = " + which;
            alert(str);
        };

        function onClick(event) {
            event = event || window.event;
            var x = event.clientX;
            var y = event.clientY;
            var str = "x = " + x + "\n" +
                      "y = " + y;
            alert(str);
        };

        function onKeyUp(event) {
            alert("onKeyUp");
        };

        function onKeyDown(event) {
            alert("onKeyDown");
        }
    </script>
</head>
<body onmousedown="onClick(event)" onkeypress="onKeyPressed(event)" onkeyup="onKeyUp(event)" onkeydown="onKeyDown(event)"></body>
</html>

How can those keys be captured?

Isn't it just `if(event.keyCode == x)` where x is the key code of shift/ctrl/alt? — 11684, Jul 26 '12 at 21:14
yet another jQuery solution, with which i won't go fishing for downvotes :) http://craig.is/killing/mice — gherkins, Jul 26 '12 at 21:15
Ooops, sorry, [the duplicate I found](http://stackoverflow.com/questions/10655202/detect-multiple-keys-on-single-keypress-event-on-jquery/10655273#10655273) was jQuery-specific. Still, easy enough to adapt, I think the only jQuery aspect of it is hooking the events, which is easy enough to mod. — T.J. Crowder, Jul 26 '12 at 21:15

score 4 · Answer 1 · answered Jul 26 '12 at 21:22

4

There's a very nice new JS library that does a great job of tracking keyboard events in the browser.

It's called Mousetrap. Here's the link: http://craig.is/killing/mice

Hope that helps.

answered Jul 26 '12 at 21:22

Spudley

166,037
39
233
307

Renato Gama · Answer 2 · 2012-07-26T21:18:48.467

2

Is jQuery allowed? If so take a look at this:

http://www.stepanreznikov.com/js-shortcuts/

otherwise you may give @Max Gherkins suggestion a chance

edited Jul 26 '12 at 21:18

answered Jul 26 '12 at 21:13

Renato Gama

16,431
12
58
92

1

i like this idea! :) thanks, but i am looking for a native way to achieve it. – Mr. Jul 26 '12 at 21:35
Ok @MrRoth - take a look at craig.is/killing/mice it will do the trick for you! :) – Renato Gama Jul 26 '12 at 21:41
thanks you again!! :) but i do not wish to use a library, i want to write one of my own. so what is the trick instead of doing reversed engineering to the code? – Mr. Jul 26 '12 at 21:45

score 2 · Answer 3 · answered Jul 26 '12 at 21:19

2

AFAIK You have to use the keyup or keydown event to capture the shift, keyPress does not capture it. Check out this list of keys captured by each event if you need more details. Since shift is a modifier key it's not captured. Why this is the case I cannot explain.

answered Jul 26 '12 at 21:19

IanStallings

806
10
21

please see my update. i have included the `onkeydown` and `onkeyup` handlers, though only `onkeydown` is called when a key is pressed. – Mr. Jul 26 '12 at 21:38

HTML\Javascript - get ATL\CTRL\SHIFT key press

3 Answers3

Linked