Problems with keyboard layouts

vtekal commented 10 years ago

Keyboard layouts are not handled very well on some browsers. The HTML-sample below works okay in Firefox, but fails in IE and Chrome (on windows), if i use estonian keyboard layout. All work as expected with standard US keyboard. Brackets [, {, ] and } are displayed entered with Alt Gr + 7, Alt Gr + 8, Alt Gr + 9 and 0 respectively. Alt Gr key is the right side Alt key on estonian keyboard.

<html>
    <body>
        No key events demo. Press x, [, {, ] or}.
    </body>
    <script src="http://cdn.craig.is/js/mousetrap/mousetrap.min.js"></script>
    <script>
        Mousetrap.bind('x', function() { alert("Pressed x") });
        Mousetrap.bind('[', function() { alert("Pressed [") });
        Mousetrap.bind('{', function() { alert("Pressed {") });
        Mousetrap.bind(']', function() { alert("Pressed ]") });
        Mousetrap.bind('}', function() { alert("Pressed }") });
    </script>
</html>

ccampbell commented 10 years ago

I just tested and this works fine for me on Chrome mac after switching to Estonian keyboard.

This is the main reason mousetrap uses character codes and not keycodes.

I took a short movie to show the keys here http://cl.ly/161g1I3S1r2y

It looks like it is just the alt+7, alt+8, alt+9, but no need for the Gr key?

vtekal commented 10 years ago

It can be just a Windows specific thing. I Tested the same problem at home on Win7, with Chrome (33.0.1750.149) and FireFox (27.0.1) and behavior is the same. FireFox works and Chrome fails. Added some debugging into mousetrap.js function _handleEvent. Results for Firefox:

23:14:21.887 "_handleKey: Char: ctrl; Modifiers: ctrl; Event type: keydown" mousetrap.js:469
23:14:21.888 "_handleKey: Char: alt; Modifiers: alt,ctrl; Event type: keydown" mousetrap.js:469
23:14:21.959 "_handleKey: Char: 7; Modifiers: alt,ctrl; Event type: keydown" mousetrap.js:469
23:14:21.959 "_handleKey: Char: {; Modifiers: ; Event type: keypress" mousetrap.js:469
23:14:22.063 "_handleKey: Char: 7; Modifiers: alt,ctrl; Event type: keyup" mousetrap.js:469

Chrome shows the following log:

_handleKey: Char: ctrl; Modifiers: ctrl; Event type: keydown mousetrap.js:469
_handleKey: Char: alt; Modifiers: alt,ctrl; Event type: keydown mousetrap.js:469
_handleKey: Char: 7; Modifiers: alt,ctrl; Event type: keydown mousetrap.js:469
_handleKey: Char: {; Modifiers: alt,ctrl; Event type: keypress mousetrap.js:469
_handleKey: Char: 7; Modifiers: alt,ctrl; Event type: keyup mousetrap.js:469
_handleKey: Char: ctrl; Modifiers: alt; Event type: keyup mousetrap.js:469
_handleKey: Char: alt; Modifiers: ; Event type: keyup mousetrap.js:469

The difference seems to be, that FireFox has a keypress event without modifiers while Chrome has ctrl & alt modifiers set.

P.S I forgot to mention, that "Alt Gr" key is the right Alt key on US keyboard.

ccampbell / mousetrap

Problems with keyboard layouts #191