How to decode character pressed from jQuery's keydown()'s event handler

Question

I need to figure out which character was typed into a text field from within the handler that is called by jQuery's keydown function. key.which gives me only the keycode, but I need to figure out which ASCII character key represents. How do I do this?

Answer 1

The keyPress event is what you need to get which character was entered. (See below workaround for keydown event).

keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered.

Using jQuery e.which you can get the key code and using String.fromCharCode you can get the specific character that was pressed (including shiftKey).

DEMO: http://jsfiddle.net/9TyzP/3

Code:

element.on ('keypress', function (e) {
    console.log(String.fromCharCode(e.which));
})

Note I said jQuery's e.which because different browsers use differing properties to store this information. jQuery normalizes the .which property so you can reliably use it to retrieve the key code.

Workaround for keydown

However you can write a simple workaround to get the pressed character working on keydown.. The workaround is to create an object with key as the charCode without shift keypress and the value is with shift key.

Note: As @Sajjan Sarkar pointed out there are some differences in e.which keycode value returned from different browser. Read more here

Updated the DEMO code to normalize the cross browser keyCode value. Tested and verified in IE 8, FF and Chrome.

Full Code below and updated DEMO: http://jsfiddle.net/S2dyB/17/

$(function() {

    var _to_ascii = {
        '188': '44',
        '109': '45',
        '190': '46',
        '191': '47',
        '192': '96',
        '220': '92',
        '222': '39',
        '221': '93',
        '219': '91',
        '173': '45',
        '187': '61', //IE Key codes
        '186': '59', //IE Key codes
        '189': '45'  //IE Key codes
    }

    var shiftUps = {
        "96": "~",
        "49": "!",
        "50": "@",
        "51": "#",
        "52": "$",
        "53": "%",
        "54": "^",
        "55": "&",
        "56": "*",
        "57": "(",
        "48": ")",
        "45": "_",
        "61": "+",
        "91": "{",
        "93": "}",
        "92": "|",
        "59": ":",
        "39": "\"",
        "44": "<",
        "46": ">",
        "47": "?"
    };

    $(element).on('keydown', function(e) {
        var c = e.which;

        //normalize keyCode 
        if (_to_ascii.hasOwnProperty(c)) {
            c = _to_ascii[c];
        }

        if (!e.shiftKey && (c >= 65 && c <= 90)) {
            c = String.fromCharCode(c + 32);
        } else if (e.shiftKey && shiftUps.hasOwnProperty(c)) {
            //get shifted keyCode value
            c = shiftUps[c];
        } else {
            c = String.fromCharCode(c);
        }

        //$(element).val(c);
    }).on('keypress', function(e) {
        //$(element).val(String.fromCharCode(e.which));
    });    
});

More about keyboard events --

The keydown, keypress and keyup events fire when the user presses a key.

keydown Fires when the user depresses a key. It repeats while the user keeps the key depressed.

keypress Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.

keyup Fires when the user releases a key, after the default action of that key has been performed.

When a key is first depressed, the keydown event is sent. If the key is not a modifier key, the keypress event is sent. When the user releases the key, the keyup event is sent.

When a key is pressed and held down, it begins to auto-repeat. This results in a sequence of events similar to the following being dispatched:

keydown
keypress
keydown
keypress
<<repeating until the user releases the key>>
keyup

DEMO: http://jsfiddle.net/9TyzP/1/

keyup, keydown vs keypress

The keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed.

DEMO: http://jsfiddle.net/9TyzP/

References:

1. https://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent

2. http://www.quirksmode.org/dom/events/keys.html

3. http://unixpapa.com/js/key.html