strike_noir
strike_noir

Reputation: 4174

JavaScript function to convert keyCodes into characters

Are there any built in functions in any JavaScript framework to convert keyCodes into characters? Which accounts the shift property, so it will return the correct characters.

Or we just have to build our own function ?

Upvotes: 3

Views: 6281

Answers (2)

strike_noir
strike_noir

Reputation: 4174

I have my own function too, I modified the script from http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

        function convertKeyCode(evt) {
            var chara = "";
            var keyCode = (evt.which) ? evt.which : evt.keyCode;
            var shift = evt.shiftKey;
            //if (keyCode == 8)
            //  chara = "backspace";
            //  backspace
            //if (keyCode == 9)
            //  chara = "tab";
            //  tab
            //if (keyCode == 13)
            //  chara = "enter";
            //  enter
            //if (keyCode == 16)
            //  chara = "shift";
            //  shift
            //if (keyCode == 17)
            //  chara = "ctrl";
            //  ctrl
            //if (keyCode == 18)
            //  chara = "alt";
            //  alt
            if (keyCode == 19)
                chara = "pause/break";
            //  pause/break
            //if (keyCode == 20)
            //  chara = "caps lock";
            //  caps lock
            //if (keyCode == 27)
            //  chara = "escape";
            //  escape
            //if (keyCode == 33)
            //  chara = "page up";
            // page up, to avoid displaying alternate character and confusing people
            //if (keyCode == 34)
            //  chara = "page down";
            // page down
            //if (keyCode == 35)
            //  chara = "end";
            // end
            //if (keyCode == 36)
            //  chara = "home";
            // home
            //if (keyCode == 37)
            //  chara = "left arrow";
            // left arrow
            //if (keyCode == 38)
            //  chara = "up arrow";
            // up arrow
            //if (keyCode == 39)
            //  chara = "right arrow";
            // right arrow
            //if (keyCode == 40)
            //  chara = "down arrow";
            // down arrow
            //if (keyCode == 45)
            //  chara = "insert";
            // insert
            //if (keyCode == 46)
            //  chara = "delete";
            // delete
            // Alphanumeric
            if (keyCode == 48)
                chara = (shift) ? ")" : "0";
            if (keyCode == 49)
                chara = (shift) ? "!" : "1";
            if (keyCode == 50)
                chara = (shift) ? "@" : "2";
            if (keyCode == 51)
                chara = (shift) ? "#" : "3";
            if (keyCode == 52)
                chara = (shift) ? "$" : "4";
            if (keyCode == 53)
                chara = (shift) ? "%" : "5";
            if (keyCode == 54)
                chara = (shift) ? "^" : "6";
            if (keyCode == 55)
                chara = (shift) ? "&" : "7";
            if (keyCode == 56)
                chara = (shift) ? "*" : "8";
            if (keyCode == 57)
                chara = (shift) ? "(" : "9";

            if (keyCode == 65)
                chara = (shift) ? "A" : "a";
            if (keyCode == 66)
                chara = (shift) ? "B" : "b";
            if (keyCode == 67)
                chara = (shift) ? "C" : "c";
            if (keyCode == 68)
                chara = (shift) ? "D" : "d";
            if (keyCode == 69)
                chara = (shift) ? "E" : "e";
            if (keyCode == 70)
                chara = (shift) ? "F" : "f";
            if (keyCode == 71)
                chara = (shift) ? "G" : "g";
            if (keyCode == 72)
                chara = (shift) ? "H" : "h";
            if (keyCode == 73)
                chara = (shift) ? "I" : "i";
            if (keyCode == 74)
                chara = (shift) ? "J" : "j";
            if (keyCode == 75)
                chara = (shift) ? "K" : "k";
            if (keyCode == 76)
                chara = (shift) ? "L" : "l";
            if (keyCode == 77)
                chara = (shift) ? "M" : "m";
            if (keyCode == 78)
                chara = (shift) ? "N" : "n";
            if (keyCode == 79)
                chara = (shift) ? "O" : "o";
            if (keyCode == 80)
                chara = (shift) ? "P" : "p";
            if (keyCode == 81)
                chara = (shift) ? "Q" : "q";
            if (keyCode == 82)
                chara = (shift) ? "R" : "r";
            if (keyCode == 83)
                chara = (shift) ? "S" : "s";
            if (keyCode == 84)
                chara = (shift) ? "T" : "t";
            if (keyCode == 85)
                chara = (shift) ? "U" : "u";
            if (keyCode == 86)
                chara = (shift) ? "V" : "v";
            if (keyCode == 87)
                chara = (shift) ? "W" : "w";
            if (keyCode == 88)
                chara = (shift) ? "X" : "x";
            if (keyCode == 89)
                chara = (shift) ? "Y" : "y";
            if (keyCode == 90)
                chara = (shift) ? "Z" : "z";
            // Alphanumeric
            //if (keyCode == 91)
            //  chara = "left window";
            // left window
            //if (keyCode == 92)
            //  chara = "right window";
            // right window
            if (keyCode == 93)
                chara = "select key";
            // select key
            //if (keyCode == 96)
            //  chara = "numpad 0";
            // numpad 0
            //if (keyCode == 97)
            //  chara = "numpad 1";
            // numpad 1
            //if (keyCode == 98)
            //  chara = "numpad 2";
            // numpad 2
            //if (keyCode == 99)
            //  chara = "numpad 3";
            // numpad 3
            //if (keyCode == 100)
            //  chara = "numpad 4";
            // numpad 4
            //if (keyCode == 101)
            //  chara = "numpad 5";
            // numpad 5
            //if (keyCode == 102)
            //  chara = "numpad 6";
            // numpad 6
            //if (keyCode == 103)
            //  chara = "numpad 7";
            // numpad 7
            //if (keyCode == 104)
            //  chara = "numpad 8";
            // numpad 8
            //if (keyCode == 105)
            //  chara = "numpad 9";
            // numpad 9
            //if (keyCode == 106)
            //  chara = "multiply";
            // multiply
            //if (keyCode == 107)
            //  chara = "add";
            // add
            //if (keyCode == 109)
            //  chara = "subtract";
            // subtract
            //if (keyCode == 110)
            //  chara = "decimal point";
            // decimal point
            //if (keyCode == 111)
            //  chara = "divide";
            // divide
            //if (keyCode == 112)
            //  chara = "F1";
            // F1
            //if (keyCode == 113)
            //  chara = "F2";
            // F2
            //if (keyCode == 114)
            //  chara = "F3";
            // F3
            //if (keyCode == 115)
            //  chara = "F4";
            // F4
            //if (keyCode == 116)
            //  chara = "F5";
            // F5
            //if (keyCode == 117)
            //  chara = "F6";
            // F6
            //if (keyCode == 118)
            //  chara = "F7";
            // F7
            //if (keyCode == 119)
            //  chara = "F8";
            // F8
            //if (keyCode == 120)
            //  chara = "F9";
            // F9
            //if (keyCode == 121)
            //  chara = "F10";
            // F10
            //if (keyCode == 122)
            //  chara = "F11";
            // F11
            //if (keyCode == 123)
            //  chara = "F12";
            // F12
            //if (keyCode == 144)
            //  chara = "num lock";
            // num lock
            //if (keyCode == 145)
            //  chara = "scroll lock";
            // scroll lock
            if (keyCode == 186)
                chara = ";";
            // semi-colon
            if (keyCode == 187)
                chara = "=";
            // equal-sign
            if (keyCode == 188)
                chara = ",";
            // comma
            if (keyCode == 189)
                chara = "-";
            // dash
            if (keyCode == 190)
                chara = ".";
            // period
            if (keyCode == 191)
                chara = "/";
            // forward slash
            if (keyCode == 192)
                chara = "`";
            // grave accent
            if (keyCode == 219)
                chara = (shift) ? "{" : "[";
            // open bracket
            if (keyCode == 220)
                chara = "\\";
            // back slash
            if (keyCode == 221)
                chara = (shift) ? "}" : "]";
            // close bracket
            if (keyCode == 222)
                chara = "'";
            // single quote

            return chara;

        }

Upvotes: 0

Pranav 웃
Pranav 웃

Reputation: 8477

You could use String.fromCharCode()

From MDN :

Syntax : String.fromCharCode(num1, ..., numN)

Parameters : num1, ..., numN (A sequence of numbers that are Unicode values.)

This method returns a string and not a String object.

Because fromCharCode is a static method of String, you always use it as String.fromCharCode(), rather than as a method of a String object you created.


Update:

Here I made a function that would do what you want : http://jsbin.com/ukukuq/2/

(Code)

function keyDownEvent(e) {
    var other = {};
    var output= {};
    output['meta'] = {};
    var html = '';

    e = (e) ? e : ((event) ? event : null);

    if (e) {
        output['keyCode']   = (e.keyCode) ? e.keyCode : 'N/A';
        output['charCode'] = (e.charCode) ? e.charCode : 'N/A';
        output['meta']['shift']     =   e.shiftKey  ? true : false;
        output['meta']['ctrl']      =   e.ctrlKey   ? true : false;
        output['meta']['alt']       =   e.altKey    ? true : false;
        output['meta']['meta']      =   e.metaKey   ? true : false;

        html = document.getElementById('output')
        return html.innerHTML += '<pre>keyDown : ' + JSON.stringify(output) + '</pre>';
    } else {
        return 'error';
    }
}

function keyPressEvent(e) {
    var other = {};
    var output= {};
    var html = '';

    e = (e) ? e : ((event) ? event : null);

    if (e) {
        output['keyCode']   = (e.keyCode) ? e.keyCode : 'N/A';
        output['charCode'] = (e.charCode) ? e.charCode : 'N/A';

        html = document.getElementById('output')
        return html.innerHTML += '<pre>keyPress : ' + JSON.stringify(output) + ' Character : <strong>' +  String.fromCharCode(output['charCode']) + '</strong></pre><hr/>';
    } else {
        return 'error';
    }
}

var test = document.getElementById('test');
test.onkeydown = keyDownEvent;
test.onkeypress = keyPressEvent;

Upvotes: 4

Related Questions