2

UPDATE: This question is not a duplicate of another question. It does not have an answer elsewhere.

I was inspired by this question Can javascript tell the difference between left and right shift key? to make a keyboard input class for a game kit, to distinguish key presses for individual keys.

The rub is that the onkeydown and onkeyup events in Javascript have identical keycodes for left shift or right shift, as well as left ctrl/right ctrl and left alt/right alt.

Per the response to the above question, modern browsers now return event.location, indicating whether these keys are left or right. IE and Firefox return the appropriate location value for these keys onkeydown and onkeyup.

But Chrome gives the correct value only onkeydown. In Chrome, shift, ctrl, and alt all give a location onkeyup of KeyboardEvent.DOM_KEY_LOCATION_STANDARD, which is ambiguous.

Here is an example sandbox: jsfiddle.

If you hit shift, ctrl, or alt, the onkeydown location will show correctly in Chrome (and all other browsers), but in Chrome the onkeyup location will be 'standard'.

relevant code:

window.onkeydown = function(event)
{
    var o = 'event = onkeydown, which = ' + event.which + ', location = ';
    
    switch(event.location)
    {
        case KeyboardEvent.DOM_KEY_LOCATION_STANDARD: o += 'standard'; break;
            
        case KeyboardEvent.DOM_KEY_LOCATION_NUMPAD: o += 'numpad'; break;

        case KeyboardEvent.DOM_KEY_LOCATION_LEFT: o += 'left'; break;
            
        case KeyboardEvent.DOM_KEY_LOCATION_RIGHT: o += 'right'; break;
    }
    
    var outputSpan = document.getElementById('output');
    
    outputSpan.innerHTML = o;
};

window.onkeyup = function(event)
{
    var o = 'event = onkeyup, which = ' + event.which + ', location = ';
    
    switch(event.location)
    {
        case KeyboardEvent.DOM_KEY_LOCATION_STANDARD: o += 'standard'; break;
            
        case KeyboardEvent.DOM_KEY_LOCATION_NUMPAD: o += 'numpad'; break;

        case KeyboardEvent.DOM_KEY_LOCATION_LEFT: o += 'left'; break;
            
        case KeyboardEvent.DOM_KEY_LOCATION_RIGHT: o += 'right'; break;
    }
    
    var outputSpan = document.getElementById('output');
    
    outputSpan.innerHTML = o;
};

Is this a bug, or somehow desired behavior? In light of this, is there another way to distinguish between the left and right side keys onkeyup?

UPDATE:

I worked around this by listening to which side the keydown came from, remembering it, and assuming that the subsequent keyup came from the same side. This isn't great, since it isn't necessarily true all the time.

This question is not a duplicate of How can I tell if an event comes from right Ctrl key? which asked how to distinguish left-ctrl from right-ctrl key presses. That question is in fact answered by the question I originally referenced: Can javascript tell the difference between left and right shift key?

This appears to be a Chrome-specific defect in their API behavior, and since there isn't a full work-around, I might go file a bug report with the Chromium project.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jim Noble
  • 492
  • 6
  • 12

0 Answers0