С помощью команды jQuery keyup, как я могу определить разницу между «3» и «#» или «2» и «@»?

Question

Название в значительной степени объясняет это, но мне просто интересно, есть ли способ использовать keyup, чтобы сказать, что мой код реагирует на @, но не 2 ... то же самое с # и 3.

Прямо сейчас он дает мне тот же keycode для 2 и @, что приводит к некоторому нежелательному поведению.

Кто-нибудь знает волшебство?

ОБНОВЛЕНИЕ - решаемые

На основе обсуждений в комментариях ниже с @RobW и @MonkeyZeus, я узнал, что в то время как существует несколько способов, чтобы получить то, что мне нужно, самый прямой ответ на используйте keypress, а не keyup. Если по какой-то причине вы должны использовать клавиатуру, тогда есть несколько отличных решений для обнаружения ключа переключения в других ответах ниже.

Спасибо, David

Answer 1

Вы должны проверить сдвиг пресс состояние.

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

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

}); 

Кроме того, вы также можете проверить e.ctrlKey, e.metaKey и e.altKey.

Answer 2

На основе обсуждения с комментариев:

Вместо того, чтобы прыгать через обручи с обнаружением скана-коды и другими вопросами интернационализации, то, вероятно, лучше, чтобы проверить буквенный символ, введенный пользователем, как это показано в <input> окна ,

Используя комбинацию element.selectionStart, element.selectionEnd и substring() вы можете проверить, что фактический характер оказанной в <input> поле.

Признание выходит Rob W и PeteR за это сообщение.

Answer 3

Просто бросить еще одну шляпу в кольцо. Определение символов в событиях нажатия клавиш не является тем, что JavaScript делает очень хорошо прямо сейчас. Из-за его изменчивости я предпочел бы не принуждать какой-либо метод к расшифровке его inline и отложить оценку до другого метода, который может быть введен и выровнен.

Идеальным будет метод, который принимает в качестве аргумента KeyUp Event и возвращает любой персонаж: назовем его MapKeyPressToActualCharacter.

Тогда ваш код может выглядеть супер чистый, как это:

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

Теперь мы должны выяснить, как писать MapKeyPressToActualCharacter.
Вот реализация на основе ответа на 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

Вам также необходимо, чтобы получить отображение каждого символа, и это сдвинуто следствие с помощью метода 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; 
} 

Вот дистрибутивный JS-файл: MapKeyPress.js

* Обратите внимание, что поскольку функция MapKeyPress вызывает array.indexOf, вы должны использовать polyfill для расширения до старых браузеров. Вот shiv под названием indexOfPolyFill.js, и вот example.