Клавиатура: нажатие и нажатие

Прежде чем мы перейдем к клавиатуре, обратите внимание, что на современных устройствах есть и другие способы «ввести что-то». Например, люди используют распознавание речи (особенно на мобильных устройствах) или копируют/вставляют с помощью мыши.

Итак, если мы хотим отслеживать любой ввод в , то событий клавиатуры недостаточно. Есть еще одно событие с именем input для отслеживания изменений поля любыми способами. И это может быть лучшим выбором для такой задачи. Мы рассмотрим это позже в главе «События: изменение, ввод, вырезание, копирование, вставка».

События клавиатуры должны использоваться, когда мы хотим обрабатывать действия клавиатуры (виртуальная клавиатура также имеет значение). Например, чтобы реагировать на клавиши со стрелками Up и Down или горячие клавиши (включая комбинации клавиш).

Teststand

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

Попробуйте разные комбинации клавиш в текстовом поле.

Результат
script.js
style.css
index.html
  kinput.onkeydown = kinput.onkeyup = kinput.onkeypress = handle; пусть  lastTime = Date.now (); дескриптор функции (e) {if (form.elements [e.type + 'Ignore']. checked) return;  let text = e.type + 'key =' + e.key + 'code =' + e.code + (e.shiftKey? 'shiftKey': '') + (e.ctrlKey? 'ctrlKey': '')  + (e.altKey? 'altKey': '') + (e.metaKey? 'metaKey': '') + (e.repeat? '(повторять)': '') + " n";  if (area.value && Date.now () - lastTime> 250) {area.value + = новый массив (81) .join ('-') + ' n';  } lastTime = Date.now ();  area.value + = текст;  если (form.elements [e.type + 'Stop']. проверено) {e.preventDefault ();  }}  

  #kinput {font-size: 150%;  размер коробки: рамка-рамка;  ширина: 95%;} # площадь {ширина: 95%;  размер коробки: рамка-рамка;  высота: 250 пикселей;  граница: сплошной черный 1px;  дисплей: блок;} метка формы {дисплей: встроенный;  white-space: nowrap;}  

          Запретить значение по умолчанию для:  & nbsp; & nbsp; & nbsp;  

Игнорировать: & nbsp; & nbsp; & nbsp;

Сфокусируйтесь на поле ввода и нажмите клавишу.

Keydown и keyup

keydown события происходят при нажатии клавиши, а затем keyup - при отпускании.

event.code и event.key

Свойство key объекта события позволяет получить c haracter, а свойство code объекта события позволяет получить «код физической клавиши».

Например, тот же ключ Z можно нажимать с Shift или без него. Это дает нам два разных символа: нижний регистр z и верхний регистр Z .

event.key - это именно тот символ, и он будет другим. Но event.code тот же:

Key event.key event.code
Z z (нижний регистр) KeyZ
Shift + Z Z (верхний регистр) KeyZ

Если пользователь работает с разными языками, то при переключении на другой язык вместо "Z" будет совершенно другой символ. Это станет значением event.key , тогда как event.code всегда будет одним и тем же: "KeyZ" .

«KeyZ» и другие коды клавиш

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

Например:

  • Буквенные ключи имеют коды "Key ": " KeyA ", " KeyB " и т. д.
  • Цифровые клавиши имеют коды: «Цифра » : «Digit0» , «Digit1» и т. д..
  • Специальные клавиши кодируются их именами: «Enter» , «Backspace» , «Tab " и т. д.

Существует несколько широко распространенных раскладок клавиатуры, и в спецификации указаны коды клавиш для каждой из них.

Прочтите буквенно-цифровые раздел спецификации для получения дополнительных кодов или просто нажмите клавишу в тестовом стенде выше.

Случай имеет значение: "KeyZ ", а не "keyZ"

Кажется очевидным, но люди все равно делают ошибки.

Избегайте опечаток: это KeyZ , а не keyZ . Проверка типа event.code == "keyZ" не будет работать: первая буква "Key" должна быть в верхнем регистре.

Что делать, если на клавише нет символов? Например, Shift или F1 или другие. Для этих ключей event.key примерно такой же, как event.code :

Key event.key event.code
F1 F1 F1
Backspace BackspaceBackspace
ShiftShift ShiftRight или ShiftLeft

Обратите внимание, что событие . code указывает, какая именно клавиша нажата. Например, на большинстве клавиатур есть две клавиши Shift : слева и справа. event.code сообщает нам, какой именно из них был нажат, а event.key отвечает за «значение» клавиши: что это такое ( «Shift»).

Допустим, мы хотим обработать горячую клавишу: Ctrl + Z (или Cmd + Z для Mac). Большинство текстовых редакторов подключают к нему действие «Отменить». Мы можем установить слушателя на keydown и проверить, какая клавиша нажата.

Здесь возникает дилемма: в таком слушателе мы должны проверять значение event.key или event.code ?

С одной стороны, значение event.key - это символ, он меняется в зависимости от языка. Если посетитель использует несколько языков в ОС и переключается между ними, одна и та же клавиша дает разные символы. Поэтому имеет смысл проверить event.code , он всегда один и тот же.

Вот так:

  document.addEventListener ('keydown',  function (событие) {if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {alert ('Undo!')}});  

С другой стороны, есть проблема с event.code . Для разных раскладок клавиатуры одна и та же клавиша может иметь разные символы..

Например, вот американская раскладка («QWERTY») и немецкая раскладка («QWERTZ») под ней (из Википедии):

Для того же ключа в макете США есть « Z », а в немецкой раскладке -« Y »(буквы меняются местами).

Буквально event.code будет равно KeyZ для людей с немецкой раскладкой, когда они нажимают Y .

Если мы отметим event.code == 'KeyZ' в наш код, то для людей с немецкой раскладкой такой тест пройдет, когда они нажмут Y .

Звучит очень странно, но это так. В спецификации явно упоминается такое поведение.

Итак, event.code может соответствовать неправильному символу для неожиданного макета. Одни и те же буквы в разных раскладках могут соответствовать разным физическим клавишам, что приводит к разным кодам. К счастью, это происходит только с несколькими кодами, например keyA , keyQ , keyZ (как мы видели), и этого не происходит со специальными клавишами, такими как Shift . Вы можете найти список в спецификации.

Чтобы надежно отслеживать символы, зависящие от макета, event.key может быть лучшим способом.

С другой стороны, event.code имеет то преимущество, что всегда остается неизменным, привязанным к местоположению физического ключа, даже если посетитель меняет язык. Так что горячие клавиши, которые от него зависят, работают хорошо даже в случае переключения языка.

Хотим ли мы обрабатывать клавиши, зависящие от макета? Тогда event.key - это путь.

Или мы хотим, чтобы горячая клавиша работала даже после переключения языка? Тогда event.code может быть лучше.

Автоповтор

Если клавиша нажимается достаточно долго, он начинает «автоматически повторяться»: keydown срабатывает снова и снова, а затем, когда он отпускается, мы наконец получаем keyup . Поэтому нормально иметь много keydown и одну keyup .

Для событий, запускаемых автоповтором, объект события имеет свойство event.repeat , для которого установлено значение true .

Действия по умолчанию

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

Например:

  • На экране появляется символ ( наиболее очевидный результат).
  • Символ удален (клавиша Delete ).
  • Страница прокручивается ( PageDown key).
  • Браузер открывает диалоговое окно «Сохранить страницу» ( Ctrl + S )
  • … И так далее.

Предотвращение действия по умолчанию при нажатии keydown может отменить большинство из них, за исключением специальных ключей ОС. Например, в Windows Alt + F4 закрывает текущее окно браузера. И нет способа остановить это, запретив действие по умолчанию в JavaScript..

Например, ниже ожидает номер телефона, поэтому он не принимает ключи, кроме цифр, + , () или - :

  function checkPhoneKey (key) {return (key> = '0' && key <  = '9') ||  ключ == '+' ||  key == '(' || key == ')' ||  key == '-';}    

Обратите внимание, что специальные клавиши, такие как Backspace , Left , Right , Ctrl + V , не работают во вводе. Это побочный эффект строгого фильтра checkPhoneKey .

Давайте немного расслабим его:

  функция checkPhoneKey (ключ)  {return (key> = '0' && key <= '9') ||  ключ == '+' ||  key == '(' || key == ')' ||  key == '-' ||  key == 'ArrowLeft' ||  key == 'ArrowRight' ||  key == 'Удалить' ||  key == 'Backspace';}    

Теперь стрелки и удаление работают хорошо.

… Но мы все еще можем вводить что угодно, используя мышь и щелкните правой кнопкой мыши + Вставить. Так что фильтр не на 100% надежен. Мы можем просто позволить этому быть таким, потому что большую часть времени это работает. Или альтернативный подход - отслеживать событие input - оно срабатывает после любого изменения. Там мы можем проверить новое значение и выделить/изменить его, если оно недействительно.

Legacy

Раньше было нажатие клавиши , а также keyCode , charCode , который свойства объекта события.

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

Мобильные клавиатуры

При использовании виртуальных/мобильных клавиатур, формально известный как IME (редактор методов ввода), стандарт W3C утверждает, что e.keyCode KeyboardEvent должен быть 229 и e. key должен иметь значение "Unidentified" .

Хотя некоторые из этих клавиатур могут по-прежнему использовать правильные значения для e.key , e.code , e. keyCode … при нажатии определенных клавиш, таких как стрелки или возврат, нет гарантии, поэтому логика клавиатуры может не всегда работать на мобильных устройствах.

Резюме

Нажатие клавиши всегда генерирует событие клавиатуры, будь то символьные клавиши или специальные клавиши, такие как Shift или Ctrl и так далее. Единственное исключение - клавиша Fn , которая иногда присутствует на клавиатуре ноутбука. Для него нет события клавиатуры, потому что оно часто реализуется на более низком уровне, чем ОС.

События клавиатуры:

  • keydown - при нажатии клавиши (автоповторяется при длительном нажатии клавиши),
  • keyup - при отпускании клавиши.

Свойства события основной клавиатуры:

  • code - «код клавиши» ( «KeyA» , «ArrowLeft» и т. Д.), Зависящие от физического расположения клавиши на клавиатуре.
  • ключ - символ ( "A" , "a" и т. д.) для несимвольных ключей, например Esc , обычно имеет то же значение, что и code.

В прошлом события клавиатуры иногда использовались для отслеживания пользователя ввод в поля формы. Это ненадежно, потому что данные могут поступать из разных источников. У нас есть события input и change для обработки любого ввода (они будут рассмотрены позже в главе События: изменение, ввод, вырезание, копирование, вставка). Они запускаются после любого типа ввода, включая копирование и распознавание речи.

Мы должны использовать события клавиатуры, когда нам действительно нужна клавиатура. Например, чтобы реагировать на горячие клавиши или специальные клавиши.



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

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

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

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

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


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

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

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

Было бы проще, если бы вы реализовали что-то вроде этого.

  var dispatchForCode = function (событие, обратный вызов) {var code;  если (event.key! == undefined) {code = event.key;  } иначе, если (event.keyIdentifier! == undefined) {code = event.keyIdentifier;  } else if (событие. keyCode! == undefined) {code = event.keyCode;  } обратный вызов (код);};  

28

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

Свойство ключа:

  атрибут DOMString только для чтения  

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

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

Обратите внимание, что значение key отличается от свойств keyCode или , которые в этом: оно содержит имя ключа, а не его код . Если вашей программе нужны коды символов, вы можете использовать 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 {/* Согласно предложению @Leonid */var characterCode = e.which ||  e.charCode ||  e.keyCode ||  0;  }/* ... код, использующий переменную characterCode */ 

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

  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);  } еще {var characterCode = 0;  }  

См. также: документацию по свойству KeyboardEvent.code и некоторые дополнительные сведения в этом ответе..

Улучшите этот ответ
отредактировано 24 авг., 12:36
ответил 19 августа 2017 в 17:17
  • Ваше решение не работает в моем браузере (Windows 10, Chrome 60, бельгийская клавиатура). Прежде всего, функция charCodeArr не существует. Кроме того, charCodeAt не работает для всех значений e.key . Например, для клавиши Enter / Return значение свойства e.key равно «Enter» , и выполнение charCodeArr для этой строки возвращает значение 69 (которое является кодом ASCII для символа E ). - Джон Слегерс, 24 августа 2017, в 11:06
  • @JohnSlegers, да, это была опечатка, я имел в виду массив, созданный пользователем. Пожалуйста, смотрите мой обновленный ответ для более подробной информации. - user10089632 24 авг., 2017 в 12:37
добавить комментарий |

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

Свойство ключа:

  атрибут только для чтения DOMString  key  

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

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

Обратите внимание, что значение key отличается от свойств keyCode или , которые в этом: оно содержит имя ключа, а не его код . Если вашей программе нужны коды символов, вы можете использовать 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 {/* Согласно предложению @Leonid */var characterCode = e.which ||  e.charCode ||  e.keyCode ||  0;  }/* ... код, использующий переменную characterCode */ 

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

  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);  } еще {var characterCode = 0;  }  

См. также: документацию по свойству KeyboardEvent.code и некоторые дополнительные сведения в этом ответе.


24

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

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

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

  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/
Улучшите этот ответ
ответил 18 апр. '18 в 15:03
  • Согласно MDN ни Internet Explorer, ни Edge не поддерживают KeyboardEvent.code . Кроме того, значения для key и code зависят от браузера. Обе проблемы делают key и code непрактичными для использования в реальных приложениях. - Джон Слегерс, 18 апр. '18 в 19:33
  • @JohnSlegers, пожалуйста, см. developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key - kumarharsh 19 апр. '18 в 2:06
  • Если я хочу проверить стрелку клавиши, страница вверх/вниз, начало и конец, следует ли использовать key или code ? Обычно это физическая клавиша, но это может зависеть также от Num Lock и раскладки ... Какая наилучшая практика? - Джейк 04 ноя. '18 в 22:54
добавить комментарий |

TL; DR: я бы посоветовал вам использовать новое событие . 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

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

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

  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/

16

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

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

  window.addEventListener ("keydown", function (event) {if (event.defaultPrevented) {return;//Должен сделать  ничего, если действие по умолчанию было отменено} var handled = false; if (event.key! == undefined) {//Обрабатываем событие с помощью KeyboardEvent.key и устанавливаем handled true.} else if (event.keyIdentifier! == undefined  )  {//Обрабатываем событие с помощью KeyboardEvent.keyIdentifier и устанавливаем обработанное значение true.  } else if (event.keyCode! == undefined) {//Обрабатываем событие с помощью KeyboardEvent.keyCode и устанавливаем обработанное значение true.  } if (handled) {//Подавляем "двойное действие", если событие обработано событие. preventDefault ();  }}, true);  

Улучшите этот ответ
отредактировано 14 февраля '16 в 18:02
ответил 14 февраля '16 в 17:55
  • 3
    К сожалению, key - это строковое значение, зависящее от браузера, например "Enter" или "ArrowUp" , и нет стандартизованного способа преобразовать его в соответствующий код. так что вам понадобится еще больше шаблонного кода для преобразования между ключом и кодом. - Джон Слегерс, 24 авг., 2017, 11:27
добавить комментарий |

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

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

  window.addEventListener ("keydown", function (event) {if (event.defaultPrevented) {return;//Должен  ничего не делать, если действие по умолчанию было отменено} var handled = false; if (event.key! == undefined) {//Обрабатываем событие с помощью KeyboardEvent.key и устанавливаем handled true.} else if (event.keyIdentifier! ==  undefined) {//Обрабатываем событие с помощью KeyboardEvent.keyIdentifier и устанавливаем обработанное значение true.} else if (event.keyCode! == undefined) {//Обрабатываем событие с помощью KeyboardEvent.keyCode и устанавливаем обработанное значение true.} if (handled) { //Подавляем "двойное действие", если событие обрабатывается event.preventDefault ();}}, true);  

13

Например, если вы хотите определить, была ли нажата клавиша «Enter» или нет t:

Вместо

  event.keyCode === 13  

Сделайте это как

  event.key === 'Enter'  

Улучшите этот ответ
ответил 23 января '20 в 14:17
  • 2
    В В свете «практической» части вопроса это должен быть принятый ответ. - Эдуардо Пигнателли 26 дек. '20 в 14:33
добавить комментарий |

Например, если вы хотите определить, была ли нажата клавиша «Enter» или нет:

Вместо

  event.keyCode === 13  

Сделайте это как

  событие. key === 'Enter'  

-1

Вы можете использовать

  parseInt (event.key, radix: 10)  

Улучшить этот ответ
отредактировал 8 декабря '20 в 9:21
theWellHopeErr
1,68155 серебряных знаков1818 бронзовых знаков
ответил 08 дек.2020 в 18:03
  • 2
    Пожалуйста, не публикуйте только код в качестве ответа, но также объясните, что делает ваш код и как он решает проблему, связанную с вопросом. Ответы с объяснениями обычно более полезны и качественнее, и с большей вероятностью привлекают положительные голоса - Ран Марчиано, 8 дек., 20:34
добавить комментарий |

Вы можете использовать

  parseInt (event.key, radix: 10)  

-2

  (e) => {e.key === 'Escape';}  

совпадает с

  (  e) => {e.keyCode === 27;}  

лучше использовать второй

Улучшить этот ответ
ответил 24 дек. '20 в 18:33
  • Это не отвечает на вопрос. Почему было бы лучше использовать keyCode ? Вы проверили какие-нибудь из одобренных ответов? - Жольт Месарош 24 дек. '20 в 18:57
добавить комментарий |

  (e) => {e.key === 'Escape';}  

совпадает с

  (e) => {e.keyCode === 27;}  

лучше использовать второй

Оцените статью
logicle.ru
Добавить комментарий