How to get LOCALIZED character on keypress?

10,206

Solution 1

Using the keypress event will give you the character typed, regardless of keyboard layout.

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    var charTyped = String.fromCharCode(charCode);
    alert("Character typed: " + charTyped);
};

Here's my usual link to Jan Wolter's excellent page documenting JavaScript key handling: http://unixpapa.com/js/key.html

Solution 2

And make sure you are using 'keypress', but not 'keydown' event.

If you use 'keydown' String.fromCharCode(event.keyCode || event.which), it won't return you a localised character. At least this was an issue for me on OS X with Chrome / FF.

Share:
10,206
Honza Kuchař
Author by

Honza Kuchař

Updated on June 14, 2022

Comments

  • Honza Kuchař
    Honza Kuchař over 1 year

    I need to get localized character on keypress event. For example: on a Czech keyboard I need to get ř not 5 character (key code 53) (see Czech keyboard layout). Is there any other way to get character and to not use text input and reading value? By other words is there any way how to get character from event object respecting current user keyboard layout?


    (Added sample code)

    <html>
    <body>
    <script language="JavaScript">
    function onLoad() {
        console.log(document.getElementById("test"));
        document.getElementById("test").onkeydown = function(event) {
                    console.log("Code: "+event.keyCode+"; Key: "+String.fromCharCode(event.keyCode));
            }
    }
    </script>
    <body onLoad="onLoad();">
        <input id="test">
    </body>
    </html>
    

    (Example online)

    When you try this code, and you press ř-key you will see in Firebug console "Code: 53; Key: 5". And I need to get "ř" not "5".

    I think that this "problem" appears on all non-English keyboards.

  • Honza Kuchař
    Honza Kuchař over 12 years
    Thank you very much for your aswer. But I need to get localized character, character that is affected by keyboard layout.
  • Tim Down
    Tim Down over 12 years
    @Honza: Unless I've fundamentally misunderstood, that is precisely what you'll get from my code. Your example uses keydown, which is the wrong event. Only the keypress event can give you reliable information about the character typed.
  • Honza Kuchař
    Honza Kuchař over 12 years
    Oh, yes! Keypress is the solution! Thank you very much!
  • jvacaq
    jvacaq about 9 years
    But what if you whant to know the é character was entered?
  • Tim Down
    Tim Down about 9 years
    @jvacaq: keypress gives you that.
  • user1001630
    user1001630 over 8 years
    However, what if I'm typing German on an English keyboard and need to type a sequence of keypresses to get to the real character? E.g. A-umlaut (ä) is entered as Alt-U, followed by A on Mac OS. How can I get the umlaut character as a single character after the whole sequence is punched in?
  • Omar Bahareth
    Omar Bahareth over 6 years
    I made a CodePen out of this for anybody who wants to see it in action: codepen.io/obahareth/pen/eRBJBr