В 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.0keyCode
возвращает 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
эти функции никогда официально не указывались, и текущие реализации браузера существенно различаются. Большой объем устаревшего контента, включая библиотеки сценариев, которые полагаются на обнаружение агента пользователя и соответствующие действия, означают, что любая попытка формализовать эти устаревшие атрибуты и события будет рисковать сломать столько контента, сколько это исправит или позволит. Кроме того, эти атрибуты не подходят для международного использования и не касаются проблем доступности.
Итак, после установления причины, по которой был заменен устаревший код ключа, давайте посмотрим, что вам нужно сделать сегодня:
- все современные браузеры поддерживают новые свойства (
key
иcode
). - IE и Edge поддерживают более старую версию спецификации, которая имеет разные имена для некоторых ключей. Для этого можно использовать прокладку:https://github.com/shvaikalesh/shim-keyboard-event-key (или сверните свой собственный-это довольно мало в любом случае)
- Edge исправил эту ошибку в последней версии (вероятно, будет выпущен в апреле 2018 года) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
- список ключей случае вы можете использовать: https://www.w3.org/TR/uievents-key/
делай то, что я делаю. Мне просто все равно. MDN может сказать, что он устарел, но если они не предоставляют альтернативу (за исключением keyIdentifier), то вы должны использовать устаревшую версию.