Can javascript tell the difference between left and right shift key?

Question

Mostly this is a sanity check. The key code for both shift keys is 16. Does that mean it is actually impossible to distinguish a left and right shift events in a browser?

score 29 · Accepted Answer · answered Feb 26 '14 at 00:18

29

In newer browsers supporting DOM3 you can use event.location to check the location.

In the DOM3 spec, there are 4 constants defined for location, DOM_KEY_LOCATION_STANDARD, DOM_KEY_LOCATION_LEFT, DOM_KEY_LOCATION_RIGHT, andDOM_KEY_LOCATION_NUMPAD.

In this case, you can do:

if (event.location === KeyboardEvent.DOM_KEY_LOCATION_LEFT){

} else if (event.location === KeyboardEvent.DOM_KEY_LOCATION_RIGHT){

}

answered Feb 26 '14 at 00:18

loganfsmyth

156,129
30
331
251

Can you show me the full code? I didn't get how to execute it – Gijo Varghese Oct 29 '16 at 13:08
You would have this inside an keyboard event handler in the browser, where the first argument to the event handler function is `event`. – loganfsmyth Oct 29 '16 at 17:41
Its ok. I did it another way. http://stackoverflow.com/questions/40320597/detect-left-or-right-shift-key-in-keypress-jquery/40320730?noredirect=1 – Gijo Varghese Oct 29 '16 at 17:43
This answer is still valid, but over the years there is a new good answer at the bottom. – Weavermount Oct 02 '18 at 19:30

score 5 · Answer 2 · answered Aug 27 '18 at 14:37

You can use event.code (the physical keyboard string) instead of event.key (the numeric ascii value).

event.code MDN docs

The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key).

If you scroll down to "Code values" at the bottom, you can find the two distinct shift keys:

"ShiftLeft", "ShiftRight"

score 2 · Answer 3 · edited Feb 26 '14 at 07:04

2

Internet explorer is capable of distinguishing left and right shift with the shiftLeft property:

shiftLeft property (event)

Otherwise, they are indistinguishable.

edited Feb 26 '14 at 07:04

AminM

1,658
4
32
48

answered Feb 26 '14 at 00:15

MattG

1,416
2
13
31

There are some difference. Check the example on plunkr in this question: http://stackoverflow.com/questions/30218752/how-to-detect-shift-right-arrow-some-other-key-in-angular The same code works fine with left shift and does not work with right shift – gandra404 May 14 '15 at 10:11

score 1 · Answer 4 · answered Oct 14 '17 at 20:39

The easiest way to do it

$(document).ready(function(){
  $("html").keydown(function(e) {

      if (e.shiftKey) {
         if (event.location == 1) console.log('left shift');
         if (event.location == 2) console.log('right shift');
      }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Note: You have to click the inside white space when you run code snippet to activate keyboard keys. This is tested in Chrome and Safari.

This works in Firefox, but in Chrome 92 and above (the ones I tested) it always says "left shift". — Matt Godbolt, Sep 05 '21 at 19:54

Can javascript tell the difference between left and right shift key?

4 Answers4

Linked

Related