How to get LOCALIZED character on keypress?

Asked 24/3, 2011 at 13:32 Answered 26/10, 2016 at 9:48

Solved javascript localization dom-events keypress keyboard-layout

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.

Openair answered 24/3, 2011 at 13:32 Comment(0)

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

Hitoshi answered 24/3, 2011 at 14:12 Comment(7)

Thank you very much for your aswer. But I need to get localized character, character that is affected by keyboard layout. – Haymow 24/3, 2011 at 14:21

@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. – Hitoshi 24/3, 2011 at 14:49

Oh, yes! Keypress is the solution! Thank you very much! – Haymow 31/3, 2011 at 14:5

But what if you whant to know the é character was entered? – David 3/10, 2014 at 16:28

@jvacaq: keypress gives you that. – Hitoshi 3/10, 2014 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? – Heloise 19/3, 2015 at 10:48

I made a CodePen out of this for anybody who wants to see it in action: codepen.io/obahareth/pen/eRBJBr – Ese 15/6, 2017 at 12:7

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.

Mirna answered 26/10, 2016 at 9:48 Comment(0)

Recommended topics

Hot tags