Как определить `delete` и` .`, когда пользователь нажимает клавиатуру в Chrome?

Question

Когда я нажимаю ., запускаются три события: keydown, keypress и keyup.

keydown
  which: 190 == ¾
  keyCode: 190 == ¾

keypress
  which: 46 == .
  keyCode: 46 == .

keyup
  which: 190 == ¾
  keyCode: 190 == ¾

Когда я нажимаю delete, запускаются два события, keydown и keyup.

keydown
  which: 46 == .
  keyCode: 46 == .

keyup
  which: 46 == .
  keyCode: 46 == .

Я хочу нажать . и получить соответствующий символ (46 == .). Но на keydown и keyup я получаю 190, что составляет ¾. На keypress я получаю правильное значение, но это событие не срабатывает, когда я нажимаю delete.

Когда я нажимаю delete, я получаю код 46 на keydown и keyup. Но код 46 - это ., а не delete.

Как создать событие для захвата обеих клавиш и определения разницы, если это была нажатая клавиша . или delete?

Страница для тестирования: http://jsfiddle.net/Eg9F3/

Answer 1

Я думаю, что лучшим решением было бы сопоставить нужные вам клавиши ( demo ), а затем использовать e.which для перекрестной ссылки на нажатую клавишу. Существует хорошая ссылка кросс-браузерных keyCode значений, которые работают в этом случае, поскольку jQuery нормализует значение e.which.

var keys = {
  46  : 'del',
  190 : '.'
};

$("textarea").bind('keyup', function(e){
  $('#r').append( 'keyup (' + e.which + '): ' + (keys[e.which] || String.fromCharCode(e.which)) );
});

Это похоже на метод, который используется jQuery UI - смотрите перекрестную ссылку на коды клавиш вверху файла? И это также метод, который я использую в плагине keycaster .

Answer 2

На самом деле это странно, но это логика.

Функция String.fromCharCode работает с реальным символьным кодом, а не с действиями в КБ (left, delete ...)

Почему бы просто не фильтровать по коду ключа?

Answer 3

Я вынудил такое же поведение, как Firefox, пример на jsFiddle

$("textarea").keydown(function(e) {
    // if the key pressed was found on the list of specialChars
    if (specialChars[e.keyCode])
    {
        // triggers the fake event
        $("textarea").trigger("chromekeypress", e);

        // temporary avoid keypress from firing
        $("textarea").unbind("keypress");
        setTimeout(function(){ $("textarea").bind("keypress", handleKey); },10);
    }
});

$("textarea").keypress(handleKey); // main event

$("textarea").bind("chromekeypress", chromeKeyPress); // chrome workaround

function chromeKeyPress(i,e){
    e.type="chromekeypress";
    e.which = 0; // copy Firefox behavior, which == 0 means a special key pressed
    handleKey(e); // fires the main event
}
function handleKey(e) {

    // which is going to be 0 if it is a special key
    // and keycode will have the code of the special key
    // or
    // which will have the value of the key

    $("#r").html($("#r").html() + "\n" +
        e.type + "\n" +
        "  which: " + e.which + " == " + String.fromCharCode(e.which) + "\n" +
        "  keyCode: " + e.keyCode + " == " + String.fromCharCode(e.keyCode) + "\n" +
     "");
}

Answer 4

Значение «which» в обработчике «keypress» не имеет того же значения, что и значение «which» в обработчике «keydown» или «keyup». В них это код клавиши для клавиши на клавиатуре, а не порядковый номер символа. В «нажатии клавиш» это символ, но вы не получаете «нажатия клавиш» для Del (как вы заметили).

Таким образом, это 46 отличается в обработчике «нажатия клавиш» (для «.») От событий «keydown» и «keyup» для Del.

Вы, вероятно, должны использовать «keydown» или «keyup» и проверить код ключа.