With jQuery keyup command how can I tell the difference between "3" and "#" or "2" and "@"?

Question

The title pretty much explains it, but I am simply wondering if there is a way to use keyup to tell my code to react to @ but not 2...same with # and 3.

Right now it gives me the same keycode for 2 and @ which leads to some undesirable behavior.

Anyone know the magic?

UPDATE - SOLVED

Based on the discussions in the comments below with @RobW and @MonkeyZeus, I have learned that while there are several ways to get what I need, the most straight forward answer is to use keypress rather than keyup. If you must use keyup for some reason, then there are some great solutions to detect the shift key in the other answers below.

Thanks, David

Answer 1

You have to check the Shift press state.

$("#id").on("keyup", function(e){
    var key = String.fromCharCode(e.which).toLowerCase();

    if (key == "3" && e.shiftKey) {
        // #
    } else if(key == "2" && e.shiftKey) {
        // @
    }

});

Likewise, you can also check e.ctrlKey, e.metaKey, and e.altKey.

Answer 2

Based on the discussion from the comments:

Instead of jumping through hoops with keycode detection and other internationalization issues, it is probably best to check the literal character entered by the user as it is shown in the <input> box.

Using a combination of element.selectionStart, element.selectionEnd, and substring() you can check the what is the actual character as rendered by the <input> field.

Recognition goes out to Rob W and PeteR for this post.

Answer 3

Just to throw another hat in the ring. Determining characters in keypress events isn't something that JavaScript does very well right now. Due to it's variability, I'd rather not force any method to have to decipher it inline, and defer evaluation to another method that can be subbed in and out.

The ideal would be a method that takes in the KeyUp Event as an argument and returns whatever character was pressed: Let's call it MapKeyPressToActualCharacter.

Then your code could look super clean like this:

$("#id").on("keyup", function(e){
    switch(MapKeyPressToActualCharacter(e)) {
        case "#":
            //handle #
            break;
        case "@":
            //handle @
            break;
    }
});

Now we just have to figure out how to write MapKeyPressToActualCharacter.
Here's an implementation based off the answer to get key char from keycode with shift modifier:

function MapKeyPressToActualCharacter(event) {
    var isShiftKey = event.shiftKey;
    var characterCode = event.keyCode;
    var isAlphabetChar = characterCode >= 65 && characterCode <= 90;
    var specialChars = [8,9,13,16,17,18,20,27,91,92];
    var character = "";

    if (valueInArray(characterCode, specialChars)) {
        return false;
    }

    if (isAlphabetChar) {
        character = String.fromCharCode(characterCode);
    } else if (isShiftKey) {
        character = GetShiftedCharacters()[characterCode];
    } else {
        character = String.fromCharCode(characterCode);
    }
    return character;
}

function valueInArray(value, array) {
    return array.indexOf(value) > -1;
}

Working Demo in Fiddle

You'll also need to get a mapping of each character and it's shifted corollary with the method GetShiftedCharacters:

function GetShiftedCharacters() {
    var characterMap = {32: " ",
                        48: ")",
                        49: "!",
                        50: "@",
                        51: "#",
                        52: "$",
                        53: "%",
                        54: "^",
                        55: "&",
                        56: "*",
                        57: "(",
                        59: ":",
                        107: "+",
                        109: "_",
                        188: "<",
                        190: ">",
                        191: "?",
                        192: "~",
                        219: "{",
                        220: "|",
                        221: "}",
                        222: "\\" };
    return characterMap;
}

Here's a distributable JS file: MapKeyPress.js

*Note, since the MapKeyPress function calls array.indexOf, you should use a polyfill to extend to older browsers. Here's a shiv called indexOfPolyFill.js, and here's an example.