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?

Chartist

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? – Saree

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) – Chartist

It's still not clear what you want. Do you want the actual character that was typed? The actual physical key that was pressed? – Piane

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) – Chartist

Answer 1

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;
}

Nyeman

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. – Chartist

This works, but it is indeed upsetting that there is no standard accepted solution. – Toitoiboid

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)? – Kutzer

Answer 2

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.

Acidulous

Is this supported in all browsers? – Feint

Answer 3

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];
    }
}

Petrozavodsk