.keyCode vs. .which

Я думав, що на це відповістимуть десь у стеку Overflow, але не можу його знайти.

Якщо я слухаю подію натискання клавіші, чи повинен я використовувати .keyCodeабо .whichвизначити, чи була натиснута клавіша Enter?

Я завжди робив щось подібне:

$("#someid").keypress(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // do something
  }
});

Але я бачу приклади, які використовують .whichзамість .keyCode. Яка різниця? Чи один із крос-браузерів дружніший, ніж інший?

Примітка . Відповідь, написана нижче, була написана в 2010 році. Тут через багато років обидва keyCodeі whichзастаріли на користь key(для логічного ключа) та code(для фізичного розміщення ключа). Але зауважте, що IE не підтримує code, і його підтримка keyбазується на старій версії специфікації, тому не зовсім коректно. Коли я пишу це, нинішній Edge, заснований на EdgeHTML та Chakra, також не підтримує code, але Microsoft виконує заміну Edge на базі Blink - і V8 , що, імовірно, робить / буде.

Деякі браузери використовують keyCode, інші використовують which.

Якщо ви використовуєте jQuery, ви можете надійно використовувати, whichяк jQuery стандартизує речі ; Більше тут.

Якщо ви не використовуєте jQuery, ви можете зробити це:

var key = 'which' in e ? e.which : e.keyCode;

Або в якості альтернативи:

var key = e.which || e.keyCode || 0;

... який обробляє можливість, яка e.whichможе бути 0(відновивши його 0в кінці, використовуючи цікаво потужний ||оператор JavaScript ).

jQuery нормалізується event.whichзалежно від того event.which, підтримується він event.keyCodeчи event.charCodeпідтримується браузером:

// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
   event.which = event.charCode != null ? event.charCode : event.keyCode;
}

Додатковою перевагою .whichє те, що jQuery робить це і для клацання мишею:

// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
    event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}

Якщо ви перебуваєте у ванільному Javascript, зауважте, що клавіша keyCode застаріла і буде знята:

Ця функція була видалена з веб-стандартів. Хоча деякі веб-переглядачі можуть все-таки підтримувати його, він перебуває в процесі випадання. Уникайте його використання та по можливості оновлюйте існуючий код; див. таблицю сумісності внизу цієї сторінки, щоб направити своє рішення. Майте на увазі, що ця функція може припинити роботу в будь-який час

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Замість цього використовуйте або: .key або .code залежно від поведінки, яку ви хочете: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US / docs / Web / API / KeyboardEvent / key

Обидва реалізовані на сучасних браузерах.

подивіться на це: https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

У випадку натискання клавіші значення Unicode натиснутої клавіші зберігається у властивості keyCode або charCode, ніколи і в обох. Якщо натиснута клавіша генерує символ (наприклад, "a"), charCode встановлюється в код цього символу, зважаючи на регістр букви. (тобто charCode враховує, чи утримується клавіша shift). В іншому випадку код натиснутої клавіші зберігається в keyCode. keyCode завжди встановлюється в подіях клавіатури та клавіатури. У цих випадках charCode ніколи не встановлюється. Щоб отримати код ключа незалежно від того, зберігався він у keyCode чи charCode, запитайте, яке властивість. Символи, введені через IME, не реєструються через keyCode або charCode.

event.keyНаразі рекомендую . Документи MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCodeі event.whichобидва мають неприємні застарілі попередження у верхній частині своїх сторінок MDN:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US / docs / Web / API / KeyboardEvent /, який

Для буквено-цифрових ключів, event.keyсхоже, реалізовано однаково у всіх браузерах. Для керуючих клавіш (вкладка, введення, втеча тощо) event.keyмає однакове значення для Chrome / FF / Safari / Opera, але інше значення в IE10 / 11 / Edge (IE, мабуть, використовують старішу версію специфікації, але відповідають одна одній, як від 14 січня 2018 року).

Для буквено-цифрових ключів чек виглядатиме приблизно так:

event.key === 'a'

Для контрольних символів вам потрібно зробити щось на кшталт:

event.key === 'Esc' || event.key === 'Escape'

Я використовував приклад тут для тестування на декількох браузерах (мені довелося відкрити в codepen і відредагувати його для роботи з IE10): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ код

event.code згадується в іншій відповіді як можливість, але IE10 / 11 / Edge не реалізує її, тому це вирішено, якщо ви хочете підтримати IE.

Надійна бібліотека Javascript для фіксації вводу клавіатури та введених комбінацій клавіш. Він не має залежностей.

http://jaywcjlove.github.io/hotkeys/

hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('you pressed ctrl+a!');break;
        case "ctrl+b":alert('you pressed ctrl+b!');break;
        case "r":alert('you pressed r!');break;
        case "f":alert('you pressed f!');break;
    }
});

гарячі клавіші розуміє такі модифікатори: ⇧, shift, option, ⌥, alt, ctrl, control, command, і ⌘.

Наступні спеціальні клавіші можна використовувати для швидкого доступу: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deleteі f1через f19.

У Firefox властивість keyCode не працює на події onkeypress (поверне лише 0). Для рішення крос-браузера використовуйте властивість разом з keyCode, наприклад:

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support