KeyboardEvent.keyCode устарел. Что это значит на практике?

Ответ 1

У вас есть три способа справиться с этим, так как он написан на ссылке, которую вы поделили.

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

вы должны созерцать их, что правильный путь, если вы хотите поддержку кросс-браузера.

Это может быть проще, если вы реализуете нечто подобное.

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};

Ответ 2

Кроме того, что все keyCode, которые, charCode и keyIdentifier устарели:
charCode и keyIdentifier являются нестандартными функциями.
keyIdentifier удален с Chrome 54 и Opera 41.0
keyCode возвращает 0, при событии нажатия клавиши с нормальными символами в FF.

Ключевое свойство:

 readonly attribute DOMString key

Удерживает значение атрибута ключа, соответствующее нажатой клавише

На момент написания этой статьи свойство key поддерживается всеми основными браузерами: Firefox 52, Chrome 55, Safari 10.1, Opera 46. За исключением Internet Explorer 11, который имеет: нестандартные ключевые идентификаторы и неправильное поведение с помощью AltGraph. Больше информации
Если это важно и/или обратная совместимость, то вы можете использовать обнаружение функции, как в следующем коде:

Обратите внимание, что значение key отличается от keyCode или which свойств в нем: оно содержит имя ключа, а не его код. Если вашей программе нужны коды символов, вы можете использовать charCodeAt(). Для одиночных печатных символов вы можете использовать charCodeAt(), если вы имеете дело с ключами, чьи значения содержат несколько символов, таких как ArrowUp, шансы: вы проверяете специальные клавиши и предпринимаете действия соответственно. Поэтому попробуйте реализовать таблицу значений ключей и их соответствующие коды charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27... и так далее, пожалуйста, взгляните на Key Значения и их соответствующие коды

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */  

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

if(e.which || e.charCode || e.keyCode ){
        var characterCode = e.which || e.charCode || e.keyCode;
    }else if (e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        var characterCode = 0;
    }

См. Также: документы свойств KeyboardEvent.code и некоторые подробности в этом ответе.

Ответ 3

MDN уже предоставил решение:

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

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

Ответ 4

TL;DR: Я бы предположил, что вы должны использовать новые свойства event.key и event.code вместо устаревших. IE и Edge поддерживают эти свойства, но пока не поддерживают новые имена ключей. Для них есть небольшой полиполк, который позволяет им выводить стандартные ключевые/кодовые имена:

https://github.com/shvaikalesh/shim-keyboard-event-key

Я пришел к этому вопросу, ища причину того же предупреждения MDN, что и OP. После поиска еще больше проблема с keyCode становится более понятной:

Проблема с использованием keyCode заключается в том, что неанглийские клавиатуры могут создавать разные выходы, и даже клавиатура с разными макетами может привести к непоследовательным результатам. Кроме того, был случай

Если вы прочитали спецификацию W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent

На практике keyCode и charCode несовместимы на разных платформах и даже с той же реализацией в разных операционных системах или с использованием разных локализаций.

Он подробно описывает, что было не так с keyCode: https://www.w3.org/TR/uievents/#legacy-key-attributes

Эти функции никогда не были формально определены, и текущие реализации браузера меняются значительными способами. Большое количество унаследованного контента, включая библиотеки сценариев, которое опирается на обнаружение пользовательского агента и действия соответственно, означает, что любая попытка формализовать эти устаревшие атрибуты и события может привести к поломке как можно большего количества контента, чем оно будет исправлено или разрешено. Кроме того, эти атрибуты не подходят для международного использования и не затрагивают проблемы доступности.

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

1. Все современные браузеры поддерживают новые свойства (key и code).
2. IE и Edge поддерживают более старую версию спецификации, которая имеет разные имена для некоторых ключей. Вы можете использовать прокладку для этого: https://github.com/shvaikalesh/shim-keyboard-event-key (или сворачивать свой собственный - он довольно маленький)
3. Edge исправил эту ошибку в последней версии (вероятно, будет выпущен в апреле 2018 года) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
4. См. Список ключей событий, которые вы можете использовать: https://www.w3.org/TR/uievents-key/

Ответ 5

Делайте то, что я делаю. Мне просто все равно. MDN может сказать, что он устарел, но если они не предоставляют альтернативу (кроме ключевого идентификатора), тогда вы должны использовать устаревшую версию.