CODEWITHSUNDEEP
javascriptunicodecharacter-encodingkeypresskeycode
Scott F
Scott F

Reputation: 131

Javascript: Non-unicode char code to unicode character?

I'm having a character code issue with a barcode scanner used to input characters to a web interface.

If a barcode has a symbol such as - (a dash/hyphen/minus) it gives me character code 189 which is correct in many character sets. Indeed, if I have a text input selected when I do the scan it will enter the - character as expected. However, if I intercept the keypress or keyup event from the global document and use the fromCharCode() function to build the string myself, rather than letting the browser handle it, I get the ½ character which is of course the unicode conversion of the 189 code.

In the event itself both keyCode and "which" show up as 189 while the keyIdentifier is "U+00BD". Unfortunately the charCode value that I really need is always 0.

Now of course I could handle this conversion manually in about 5 seconds right now. The problem is that I don't know the full set of codes that I might get from the scanner and I'm worried about an unhandled character showing up weeks or months into the future and making some headaches. Alternatively, I could upload the raw character codes to the server and try to handle it in PHP. I'd much prefer to handle it on the client for reasons of timing and responsiveness though. Sending fake key presses to an invisible text input would probably work too but that's a really hacky workaround.

It seems like there should be a better way to do this and that I have to be missing something obvious. Does anyone have any ideas?

Upvotes: 13

Views: 2062

Answers (3)

pesla
pesla

Reputation: 1254

You should use the keypress event to obtain reliable character information. All browsers store the character code in the event's which property. Except for IE8 and lower, they store the character code in the keyCode property.

So to get the proper character code for a given keypress event, use the following:

document.addEventListener('keypress', function (event) {
    // Get the proper character code
    var charCode = (typeof event.which === 'number') ? event.which : event.keyCode;

    // Do stuff
});

You can easily test the result by opening a new tab, point it to about:blank and enter the following into your Developer Tools console:

document.addEventListener('keypress', function (event) {
    // Get the proper character code
    var charCode = (typeof event.which === 'number') ? event.which : event.keyCode;

    console.log('charCode = ' + charCode);
    console.log('fromCharCode returns ' + String.fromCharCode(charCode));
});

The output when typing a dash:

charCode = 45
fromCharCode returns -

Compare this with observing the keyup event. If you'd change the above example to listen to the keyup event, the output for a dash would be:

charCode = 189
fromCharCode returns ½

Is this something you can work with? If you want to read more about the horror of working with keyboard events, this is a great piece on the subject.

Upvotes: 2

simsketch
simsketch

Reputation: 3042

You can use charCodeAt();

var str = "HELLO WORLD";
var n = str.charCodeAt(0); //returns 72, the unicode value of H

reference: http://www.w3schools.com/jsref/jsref_charCodeAt.asp

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

If you intercept keyboard handling by taking keycodes and interpret them as characters with fromCharCode, you get wrong results, because keycodes simply identify key presses, not characters. The character associated with a key press depends on the keyboard driver.

So the intercepting routine needs to know the keyboard key assignments. You might use common Windows keycodes as a starting point, but then your software will be system-dependent.

Upvotes: 5

Related Questions