How to get LOCALIZED character on keypress?

Question

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.

score 14 · Accepted Answer · answered Mar 24 '11 at 14:12

14

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

answered Mar 24 '11 at 14:12

Tim Down

318,141
75
454
536

Thank you very much for your aswer. But I need to get **localized** character, character that is affected by keyboard layout. – Honza Kuchař Mar 24 '11 at 14:21
1

@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. – Tim Down Mar 24 '11 at 14:49
Oh, yes! **Keypress** is the solution! Thank you very much! – Honza Kuchař Mar 31 '11 at 14:05
But what if you whant to know the é character was entered? – jvacaq Oct 03 '14 at 16:28
@jvacaq: `keypress` gives you that. – Tim Down Oct 03 '14 at 16:53
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? – user1001630 Mar 19 '15 at 10:48
I made a CodePen out of this for anybody who wants to see it in action: https://codepen.io/obahareth/pen/eRBJBr – Omar Bahareth Jun 15 '17 at 12:07

score 2 · Answer 2 · answered Oct 26 '16 at 09:48

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.

answered Oct 26 '16 at 09:48

Tomas P. R.

159
1
7

How to get LOCALIZED character on keypress?

2 Answers2

Linked