В JavaScript код устарел. Что это означает на практике?

согласно MDN, мы должны определенно не использовать .свойство keyCode. Он устарел:

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

в школах w3 этот факт воспроизводится, и есть только боковая нота, говорящая, что .keyCode предоставляется только для совместимости и что последняя версия спецификации событий DOM рекомендует использовать .key собственность вместо.

проблема в том, что .key не поддерживаются браузерами, так что мы должны использовать? Я что-то упускаю?

5 ответов


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

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);
};

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);

кроме того, что все код, , который, аргументом 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... и так далее, пожалуйста, взгляните на Ключевые Значения и соответствующие коды

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  */  

может быть, вы хотите рассмотреть возможность прямой совместимости i.e используйте устаревшие свойства, пока они доступны, и только при удалении переключитесь на новые :

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 свойства docs и еще несколько подробности в этом ответ.


TLDR: я бы посоветовал вам должны использовать новый 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/

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