Get key char (value) from keycode with shift modifier

Question

I have been lucky to find String.fromCharCode(). It has helped me significantly. However, I noticed it doesn't take into account the shift modifier. I know the event.shiftKey property and use it, but right now I need to get the key value (eg: "A" or "a") which takes into account the shift key modifier. At first I used String.toLowerCase().. But I neglected to think of number keys, to give one example: "5" (without shift) and "%" (with shift). I need to differentiate between the two in my program. What's an easy way to get the key char value?

what is the context of the question. Are you trying to see if the ShiftKey was pressed during a keypress, keyup, keydown event. Or are you evaluating a string of characters and want to know if it is upper/lowercase or number/special character? — John Hartsock, Jul 26 '10 at 17:23
I know how to check if the shift key is pressed during a key event. What I am asking is if there is any way to get the character of the key pressed (a method that takes into account the shift key) — Alan, Jul 26 '10 at 17:26
It's still not clear what you want. Do you want the actual character that was typed? The actual physical key that was pressed? — Tim Down, Jul 26 '10 at 19:08
I have been using String.fromCharCode() to get the key VALUE from a keycode as so: String.fromCharCode(/* KEYCODE FOR 'A' */) // 'A' Whether I hold down shift or not the value is always "A" (capital A). Now there is still no problem. In this case I just check if the shift key is not down (and caps lock is off) and use String.toLowerCase(). This works as expected (the value is "a" normally and "A" with shift). Now the trouble comes when I type numbers (since String.toUpperCase("1")=="1") what I really want Is something to apply shift so that I get: ("1" without shift and "!" with shift) — Alan, Jul 29 '10 at 19:57

score 9 · Accepted Answer · answered Jan 24 '11 at 20:05

This brute force technique isn't the prettiest, but it seems to work. I'm in search of the same functionality.

function mapKeyPressToActualCharacter(isShiftKey, characterCode) {
    if ( characterCode === 27 || characterCode === 8 || characterCode === 9 || characterCode === 20 || characterCode === 16 || characterCode === 17 || characterCode === 91 || characterCode === 13 || characterCode === 92 || characterCode === 18 ) {
        return false;
    }
    if (typeof isShiftKey != "boolean" || typeof characterCode != "number") {
        return false;
    }
    var characterMap = [];
    characterMap[192] = "~";
    characterMap[49] = "!";
    characterMap[50] = "@";
    characterMap[51] = "#";
    characterMap[52] = "$";
    characterMap[53] = "%";
    characterMap[54] = "^";
    characterMap[55] = "&";
    characterMap[56] = "*";
    characterMap[57] = "(";
    characterMap[48] = ")";
    characterMap[109] = "_";
    characterMap[107] = "+";
    characterMap[219] = "{";
    characterMap[221] = "}";
    characterMap[220] = "|";
    characterMap[59] = ":";
    characterMap[222] = "\"";
    characterMap[188] = "<";
    characterMap[190] = ">";
    characterMap[191] = "?";
    characterMap[32] = " ";
    var character = "";
    if (isShiftKey) {
        if ( characterCode >= 65 && characterCode <= 90 ) {
            character = String.fromCharCode(characterCode);
        } else {
            character = characterMap[characterCode];
        }
    } else {
        if ( characterCode >= 65 && characterCode <= 90 ) {
            character = String.fromCharCode(characterCode).toLowerCase();
        } else {
            character = String.fromCharCode(characterCode);
        }
    }
    return character;
}

Yes. That looks good. I wanted to find out if there was an accepted solution before trying the brute force method. Thanks for the response. — Alan, Feb 28 '11 at 01:59
This works, but it is indeed upsetting that there is no standard accepted solution. — Alan Turing, Feb 18 '13 at 01:37
Any thoughts on how to make this account for non-US keyboard layouts, (eg `Shift+3` on a UK keyboard is the pounds sterling symbol)? — Steve Crockett, Jul 14 '15 at 17:11

score 4 · Answer 2 · edited Jun 13 '12 at 06:47

4

It all depends on the event you are binding to. String.fromCharCode() will account for shiftKey during the onkeypress event. It will not, however, pay attention to it during the onkeydown event.

edited Jun 13 '12 at 06:47

Botz3000

39,020
8
103
127

answered Jun 12 '12 at 16:16

johnlawrimore

41
2

Is this supported in all browsers? – joe Dec 03 '18 at 15:56

score 3 · Answer 3 · answered Apr 09 '14 at 23:12

Expanding on wsams response, here is a more complete solution which takes more memory but is more performant

var characterMapShift = [];
characterMapShift[8] = "";
characterMapShift[9] = "";
characterMapShift[13] = "\n";
characterMapShift[16] = "";
characterMapShift[17] = "";
characterMapShift[18] = "";
characterMapShift[19] = "";
characterMapShift[20] = "";
characterMapShift[27] = "";
characterMapShift[32] = " ";
characterMapShift[33] = "";
characterMapShift[34] = "";
characterMapShift[35] = "";
characterMapShift[36] = "";
characterMapShift[37] = "";
characterMapShift[38] = "";
characterMapShift[39] = "";
characterMapShift[40] = "";
characterMapShift[45] = "";
characterMapShift[46] = "";
characterMapShift[48] = ")";
characterMapShift[49] = "!";
characterMapShift[50] = "@";
characterMapShift[51] = "#";
characterMapShift[52] = "$";
characterMapShift[53] = "%";
characterMapShift[54] = "^";
characterMapShift[55] = "&";
characterMapShift[56] = "*";
characterMapShift[57] = "(";
characterMapShift[59] = ":";
characterMapShift[61] = "+";
characterMapShift[65] = "A";
characterMapShift[66] = "B";
characterMapShift[67] = "C";
characterMapShift[68] = "D";
characterMapShift[69] = "E";
characterMapShift[70] = "F";
characterMapShift[71] = "G";
characterMapShift[72] = "H";
characterMapShift[73] = "I";
characterMapShift[74] = "J";
characterMapShift[75] = "K";
characterMapShift[76] = "L";
characterMapShift[77] = "M";
characterMapShift[78] = "N";
characterMapShift[79] = "O";
characterMapShift[80] = "P";
characterMapShift[81] = "Q";
characterMapShift[82] = "R";
characterMapShift[83] = "S";
characterMapShift[84] = "T";
characterMapShift[85] = "U";
characterMapShift[86] = "V";
characterMapShift[87] = "W";
characterMapShift[88] = "X";
characterMapShift[89] = "Y";
characterMapShift[90] = "Z";
characterMapShift[91] = "";
characterMapShift[92] = "";
characterMapShift[93] = "";
characterMapShift[96] = "0";
characterMapShift[97] = "1";
characterMapShift[98] = "2";
characterMapShift[99] = "3";
characterMapShift[100] = "4";
characterMapShift[101] = "5";
characterMapShift[102] = "6";
characterMapShift[103] = "7";
characterMapShift[104] = "8";
characterMapShift[105] = "9";
characterMapShift[106] = "*";
characterMapShift[107] = "+";
characterMapShift[109] = "_";
characterMapShift[107] = "+";
characterMapShift[111] = "/";
characterMapShift[112] = "";
characterMapShift[113] = "";
characterMapShift[114] = "";
characterMapShift[115] = "";
characterMapShift[116] = "";
characterMapShift[117] = "";
characterMapShift[118] = "";
characterMapShift[119] = "";
characterMapShift[120] = "";
characterMapShift[121] = "";
characterMapShift[122] = "";
characterMapShift[123] = "";
characterMapShift[144] = "";
characterMapShift[145] = "";
characterMapShift[186] = ":";
characterMapShift[187] = "+";
characterMapShift[188] = "<";
characterMapShift[189] = "_";
characterMapShift[190] = ">";
characterMapShift[191] = "?";
characterMapShift[192] = "~";
characterMapShift[219] = "{";
characterMapShift[220] = "|";
characterMapShift[221] = "}";
characterMapShift[222] = "\"";

var characterMap = [];
characterMap[8] = "";
characterMap[9] = "";
characterMap[13] = "\n";
characterMap[16] = "";
characterMap[17] = "";
characterMap[18] = "";
characterMap[19] = "";
characterMap[20] = "";
characterMap[27] = "";
characterMap[32] = " ";
characterMap[33] = "";
characterMap[34] = "";
characterMap[35] = "";
characterMap[36] = "";
characterMap[37] = "";
characterMap[38] = "";
characterMap[39] = "";
characterMap[40] = "";
characterMap[45] = "";
characterMap[46] = "";
characterMap[48] = "0";
characterMap[49] = "1";
characterMap[50] = "2";
characterMap[51] = "3";
characterMap[52] = "4";
characterMap[53] = "5";
characterMap[54] = "6";
characterMap[55] = "7";
characterMap[56] = "8";
characterMap[57] = "9";
characterMap[59] = ";";
characterMap[61] = "=";
characterMap[65] = "a";
characterMap[66] = "b";
characterMap[67] = "c";
characterMap[68] = "d";
characterMap[69] = "e";
characterMap[70] = "f";
characterMap[71] = "g";
characterMap[72] = "h";
characterMap[73] = "i";
characterMap[74] = "j";
characterMap[75] = "k";
characterMap[76] = "l";
characterMap[77] = "m";
characterMap[78] = "n";
characterMap[79] = "o";
characterMap[80] = "p";
characterMap[81] = "q";
characterMap[82] = "r";
characterMap[83] = "s";
characterMap[84] = "t";
characterMap[85] = "u";
characterMap[86] = "v";
characterMap[87] = "w";
characterMap[88] = "x";
characterMap[89] = "y";
characterMap[90] = "z";
characterMap[91] = "";
characterMap[92] = "";
characterMap[93] = "";
characterMap[96] = "0";
characterMap[97] = "1";
characterMap[98] = "2";
characterMap[99] = "3";
characterMap[100] = "4";
characterMap[101] = "5";
characterMap[102] = "6";
characterMap[103] = "7";
characterMap[104] = "8";
characterMap[105] = "9";
characterMap[106] = "*";
characterMap[107] = "+";
characterMap[109] = "_";
characterMap[107] = "+";
characterMap[111] = "/";
characterMap[112] = "";
characterMap[113] = "";
characterMap[114] = "";
characterMap[115] = "";
characterMap[116] = "";
characterMap[117] = "";
characterMap[118] = "";
characterMap[119] = "";
characterMap[120] = "";
characterMap[121] = "";
characterMap[122] = "";
characterMap[123] = "";
characterMap[144] = "";
characterMap[145] = "";
characterMap[186] = ";";
characterMap[187] = "=";
characterMap[188] = ",";
characterMap[189] = "-";
characterMap[190] = ".";
characterMap[191] = "/";
characterMap[192] = "`";
characterMap[219] = "[";
characterMap[220] = "\\";
characterMap[221] = "]";
characterMap[222] = "'";

function mapKeyPressToActualCharacter(isShiftKey, characterCode) {
    if (typeof isShiftKey != "boolean" || typeof characterCode != "number") {
        return false;
    }

    if (isShiftKey) {
        return characterMapShift[characterCode];
    } else {
        return characterMap[characterCode];
    }
}

Get key char (value) from keycode with shift modifier

3 Answers3

Linked