What's wrong with keyCode and String.fromCharCode

Discussion in 'Javascript' started by Pugi!, Feb 27, 2006.

  1. Pugi!

    Pugi! Guest

    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!
    Pugi!, Feb 27, 2006
    #1
    1. Advertising

  2. Pugi!

    VK Guest

    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.
    VK, Feb 27, 2006
    #2
    1. Advertising

  3. Pugi!

    Pugi! Guest

    "VK" <> schreef in bericht
    news:...

    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!
    Pugi!, Feb 27, 2006
    #3
  4. Pugi!

    RobG Guest

    Pugi! wrote:
    > "VK" <> schreef in bericht
    > news:...
    >
    > 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
    RobG, Feb 28, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Marvin Massih

    "Keycode DLL not found or invalid keycode"

    Marvin Massih, Dec 31, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    2,104
    Marvin Massih
    Dec 31, 2004
  2. Nathan Sokalski
    Replies:
    4
    Views:
    4,120
    Nathan Sokalski
    Mar 11, 2006
  3. Nathan Sokalski

    Determining the Browser and event.keyCode vs. event.which

    Nathan Sokalski, Mar 10, 2006, in forum: ASP .Net Building Controls
    Replies:
    4
    Views:
    153
    Nathan Sokalski
    Mar 11, 2006
  4. Perttu Pulkkinen

    Firefox/Mozilla and window.event.keyCode

    Perttu Pulkkinen, Apr 21, 2005, in forum: Javascript
    Replies:
    1
    Views:
    129
    Daniel Kirsch
    Apr 22, 2005
  5. Thomas Christensen

    IE event and keyCode/charCode

    Thomas Christensen, Oct 20, 2005, in forum: Javascript
    Replies:
    4
    Views:
    149
Loading...

Share This Page