What's wrong with keyCode and String.fromCharCode

Pugi!

I got this (piece of) script from 'DHTML Utopia - Modern Webdesign - Using
Javascript & DOM'.

function aKeyWasPressed(e) {
if (window.event) {
var key = window.event.keyCode;
} else {
var key = e.keyCode;
}
alert('You pressed the key: ' + String.fromCharCode(key));
}

It is example of adding an eventlistener to a textarea. The events works
alright, but when I press 'a' the alert gives me 'A', when I press '8' I get
'h', when I press '0' I get ''', when I press 'à' I get '0', ....
Has probably something to do with the fact that I don't live in the UK or
USA. But it shouldn't matter; a key is a key.

Pugi!

Feb 27 '06 #1

VK

Pugi! wrote:

It is example of adding an eventlistener to a textarea. The events works
alright, but when I press 'a' the alert gives me 'A', when I press '8' I get
'h', when I press '0' I get ''', when I press 'à' I get '0', ....
Has probably something to do with the fact that I don't live in the UK or
USA. But it shouldn't matter; a key is a key.

No it's not ;-) Do not mix keyboard *scancodes* with *keycode*.
Scancode is the system value assigned to each key on your keyboard.
This value is indead layout-independent. Keycode is Unicode value going
to receiver: it depends on current layout, shift state etc.

In your particular case though it may help to monitor 'okeypress'
instead of 'onkeydown' as you're doing right now.

Feb 27 '06 #2

Pugi!

"VK" <sc**********@yahoo.com> schreef in bericht
news:11*********************@p10g2000cwp.googlegro ups.com...

Pugi! wrote:

It is example of adding an eventlistener to a textarea. The events works
alright, but when I press 'a' the alert gives me 'A', when I press '8' I
get
'h', when I press '0' I get ''', when I press 'à' I get '0', ....
Has probably something to do with the fact that I don't live in the UK or
USA. But it shouldn't matter; a key is a key.

No it's not ;-) Do not mix keyboard *scancodes* with *keycode*.
Scancode is the system value assigned to each key on your keyboard.
This value is indead layout-independent. Keycode is Unicode value going
to receiver: it depends on current layout, shift state etc.

In your particular case though it may help to monitor 'okeypress'
instead of 'onkeydown' as you're doing right now.
---

Well, actually I used onkeyup. But onkeypress only made it work for IE. So I
looked elswewhere in the code and keyCode is for IE, while Mozilla (and
rest) prefers charCode. But according to the author keyCode works fine in
Mozilla, guess he didn't debug his code hard enough.

function aKeyWasPressed(e) {
if (window.event) {
var key = window.event.keyCode;
} else {
var key = e.charCode; // changed keyCode to charCode for
Mozilla
}
alert('You pressed the key: ' + String.fromCharCode(key));
}

thanx,

Pugi!

Feb 27 '06 #3

RobG

Pugi! wrote:

"VK" <sc**********@yahoo.com> schreef in bericht
news:11*********************@p10g2000cwp.googlegro ups.com...

Pugi! wrote:

It is example of adding an eventlistener to a textarea. The events works
alright, but when I press 'a' the alert gives me 'A', when I press '8' I
get
'h', when I press '0' I get ''', when I press 'à' I get '0', ....
Has probably something to do with the fact that I don't live in the UK or
USA. But it shouldn't matter; a key is a key.

No it's not ;-) Do not mix keyboard *scancodes* with *keycode*.
Scancode is the system value assigned to each key on your keyboard.
This value is indead layout-independent. Keycode is Unicode value going
to receiver: it depends on current layout, shift state etc.

In your particular case though it may help to monitor 'okeypress'
instead of 'onkeydown' as you're doing right now.
---

Well, actually I used onkeyup. But onkeypress only made it work for IE. So I
looked elswewhere in the code and keyCode is for IE, while Mozilla (and
rest) prefers charCode. But according to the author keyCode works fine in
Mozilla, guess he didn't debug his code hard enough.

It depends on the event you are using. Keydown fires when the key is
pressed down. keypress fires when the key is released (it is almost
identical to keyup);

<URL:http://www.w3.org/TR/html4/interact/scripts.html#adef-onkeypress>
Different browsers treat events differently. The Gecko DOM event object
has both keyCode and charCode properties. In IE, the event object has a
keyCode property but no charCode property.

In IE, the keyCode property for the keydown event is the ASCII (or
Unicode) code of the key - for the 'W' key that's '87' which maps to
uppercase 'W' on my keyboard. The keypress event takes into
consideration any modifier keys that might have been pressed at the same
time, and since the 'shift' key wasn't pressed, we get a keyCode of
'119' or lowercase 'w'.

In the same situation in a Gecko browser, the keydown event will report
the keyCode of '87' and a charCode of '0'. The keypress event will
report a keyCode of '0' and a charCode of '119', so you need to look at
the right property.

A shortcut for Gecko browsers here is to use the old 'which' property
that is effectively the same as IE's keyCode property:

function showKey(e)
{
var e = e || window.event;
var kCode;
if (e.which){
kCode = e.which;
} else if (e.keyCode){
kCode = e.keyCode;
}
alert(kCode + ': ' + String.fromCharCode(kCode))
}

or more concisely:

function showKey(e)
{
var e = e || window.event;
var kCode = e.which || e.keyCode;
alert(kCode + ': ' + String.fromCharCode(kCode))
}

kCode should also have taken into consideration the keyboard layout you
are using, but that might be unreliable. It is much more reliable to
look at the text that was entered rather than grabbing keyCodes and
trying to convert them to characters.

I think the above will be much more reliable cross-browser than the one
below.
function aKeyWasPressed(e) {
if (window.event) {
var key = window.event.keyCode;
} else {
var key = e.charCode; // changed keyCode to charCode for
Mozilla
}
alert('You pressed the key: ' + String.fromCharCode(key));
}

If you want to know what key was pressed, use keydown. If you want to
know what character was entered, use keyup or keypress and use the
input's value to determine the character that was entered (or maybe
deleted).

Make sure your algorithm can cope with the entry or removal of multiple
characters without any key presses.
--
Rob

Feb 28 '06 #4