значения keyCode для цифровой клавиатуры?

Имеют ли числа на цифровой клавиатуре код клавиши, отличный от чисел в верхней части клавиатуры?

Вот код JavaScript, который должен запускаться при событии нажатия клавиши, но только если код клавиши находится между 48 и 57. Вот код:

  $ ('# rollNum'). keyup (function (e) {if (e.keyCode>  = 48 && e.keyCode   

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

Я думаю, ответ должен заключаться в том, что цифровая клавиатура имеет разные значения keyCode, но как мне узнать, что это такое?


Коды клавиш разные. Клавиатура 0-9 — это ключевой код от 96 до 105

Ваш оператор if должен быть:

  if ((e.keyCode> = 48 && e.keyCode  = 96 &  & e.keyCode  

Вот справочное руководство по кодам клавиш


— ОБНОВЛЕНИЕ —

Это старый ответ, и keyCode устарел. Теперь есть альтернативные методы для достижения этой цели, такие как использование key :

  if ((e.key> = 48 && e.key   = 96 && e.key  

Вот тестер вывода для события. key, спасибо @Danziger за ссылку.


*********** ******** Не используйте KEYCODE !!!! ******************

Проблема с keyCode состоит в том, чтобы избежать сочетания клавиш с цифрами в верхней части клавиатуры, мы должны добавить проверку для клавиши «Shift» и «Alt» , чтобы избежать использования специальных символов, таких как e @ & «{}

Простейшим решением является чтобы преобразовать e.key в число и проверить, дает ли преобразование NaN !

  let key  = Число (e.key) if (isNaN (key) || e.key === null || e.key === '') {console.log ("не является числовым")} else {console.log  ("числовой")}  

Быть машиной eful , если e.key имеет значение null или пробел , он дает 0 !

  Number (5)//=> 5Number ('5')//=> 5Number (null)//=> 0 Number ('')//=> 0Number ('chars  ')//=> NaNNumber (undefined)//=> NaN  

3


Вы можете просто запустить

  $ (document) .keyup (function (e) {console.log (  e.keyCode);});  

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

Или вы можете найти коды клавиш здесь: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Numpad_keys

1


Код клавиши отличается для чисел на цифровая клавиатура и цифры поверх клавиатуры.

keyCodes:

цифры поверх клавиатуры (0 — 9): 48-57
чисел на цифровой клавиатуре (0-9): 96-105

Условие JavaScript:

  if ((e.keyCode> = 48 && e.keyCode  = 96 && e.keyCode  

Справочник по всем кодам клавиш (с демонстрацией): http://www.codeforeach.com/javascript/keycode-for-each-key- и-использование-с-демонстрацией


Для желающих t решение CTRL + C, CTRL-V, вот и все:

 /** * Извлекает номер, который был нажат на клавиатуре.  * * событие @param {Event} Событие нажатия клавиши, содержащее keyCode.  * @returns {number | null} число от 0 до 9, которое было нажато.  Возвращает null, если не была нажата цифровая клавиша.  */function getNumberFromKeyEvent (событие) {if (event.keyCode> = 96 && event.keyCode  = 48 && event.keyCode  

Он использует логику первого ответа.


Чтобы добавить к некоторым другим ответам, обратите внимание, что:

  • keyup и keydown отличается от keypress
  • , если вы хотите использовать String.fromCharCode () для получения фактическая цифра из keyup , вам нужно сначала нормализовать keyCode.

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

  const isKeypad = range (96, 106) .includes (keyCode); const normalizedKeyCode = isKeypad?  keyCode - 48: keyCode; const isDigit = range (48, 58) .includes (normalizedKeyCode); const digit = String.fromCharCode (normalizedKeyCode);  

2


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

event.code

для отличия цифровой клавиатуры.

https://keycode.info/

  function getNumberFromKeyEvent (событие) {if (event.code.indexOf ('Numpad') === 0) {var number = parseInt (event.code. replace ('Numpad', ''), 10);  if (number> = 0 && number  


Да, они разные, и хотя многие люди сделали отличное предложение использовать console.log, чтобы убедиться в этом сами. Однако я не видел, чтобы кто-нибудь упоминал event.location, чтобы вы могли использовать это, чтобы определить, поступает ли номер с клавиатуры event.location === 3 по сравнению с верхней частью основной клавиатуры. /общие ключи event.location === 0 . Этот подход лучше всего подходит, когда вам нужно в целом определить, исходят ли нажатия клавиш из области клавиатуры или нет, event.key , вероятно, лучше для конкретных клавиш.


Ответ @ .A. Morel, на мой взгляд, является лучшим простым для понимания решением с небольшими размерами. Просто хотел добавить сверху, если вы хотите меньшее количество кода, это решение, которое является модификацией Morel, хорошо работает, не позволяя использовать буквы любого вида, включая ввод пресловутого символа ‘e’.

  функция InputTypeNumberDissallowAllCharactersExceptNumeric () {let key = Number (inputEvent.key);  return! isNaN (key);}  


Документы говорит порядок событий, связанных с событием onkeyxxx:

  1. onkeydown
  2. onkeypress
  3. onkeyup

Если вы используете код, подобный приведенному ниже, он также подходит для Backspace и ввода действий пользователя. После того, как вы сможете делать то, что хотите, в onKeyPress или onKeyUp events.Code блокирует функцию event.preventDefault, если значение не является числом, backspace или вводом.

  onInputKeyDown = event =>  {const {keyCode} = событие;  if ((keyCode> = 48 && keyCode  = 96 && keyCode  


Немного очищен @A. Ответ Мореля. Вы можете опасаться языковой раскладки клавиатуры. В некоторых раскладках клавиатуры числовые клавиши по умолчанию заменены на символы.

  let key = parseInt (e.key) if (isNaN (key)) {console.log ("is not numeric"  )} else {console.log ("является числовым")}  

1


Вы можете использовать это, чтобы легко вычислить ключевые коды:

  $ (document). keyup (function (e) {//Отображает код последней нажатой клавиши в теле $ (document.body) .html (e.keyCode);});  

http://jsfiddle.net/vecvc4fr/



KeyboardEvent.key — веб-API | MDN

Клавиша интерфейса KeyboardEvent свойство только для чтения возвращает значение клавиши, нажатой пользователем, с учетом состояния клавиш-модификаторов, таких как Shift , а также языкового стандарта и раскладки клавиатуры. Значение Unicode нажатой клавиши может быть получено из него с помощью charCodeAt () . Его значение определяется следующим образом:

Ключевые значения

См. Полный список ключевых значений.

  • Если нажатая клавиша имеет печатное представление, возвращаемое значение представляет собой непустую строку символов Юникода, содержащую печатное представление клавиши.
  • Если нажатая клавиша является управляющий или специальный символ, возвращаемое значение является одним из предопределенных значений ключа.
  • Если KeyboardEvent представляет нажатие мертвой клавиши, клавиша значение должно быть « Dead «.
  • Некоторые специальные клавиши клавиатуры (например, расширенные клавиши для управления мультимедиа на мультимедийных клавиатурах) не генерируют коды клавиш в Windows ; вместо этого они запускают события WM_APPCOMMAND . Эти события сопоставляются с событиями клавиатуры DOM и перечисляются в «Кодах виртуальных клавиш» для Windows, хотя на самом деле они не являются кодами клавиш.
  • Если ключ не может быть идентифицирован, возвращается значение равно Unidentified.

KeyboardEvent sequence

Каждые KeyboardEvent запускается в заранее определенной последовательности. Для данного нажатия клавиши последовательность запускаемых KeyboardEvent s следующая, предполагая, что Event.preventDefault не вызывается:

  1. Сначала запускается событие keydown . Если клавиша удерживается дальше и клавиша создает символьную клавишу, то событие продолжает генерироваться в интервале, зависящем от реализации платформы, а для свойства KeyboardEvent.repeat только для чтения установлено значение true .
  2. Если ключ создает символьный ключ, который приведет к вставке символа, возможно, в , или элемент с HTMLElement.contentEditable , установленным в значение true, beforeinput и input типы событий запускаются в этом порядке. Обратите внимание, что некоторые другие реализации могут запускать событие keypress , если оно поддерживается. События будут запускаться повторно, пока клавиша удерживается нажатой.
  3. Событие keyup запускается после отпускания клавиши. На этом процесс завершается.

В последовательности 1 и 3 событие KeyboardEvent. key определен и ему присвоено значение согласно правилам, определенным ранее.

Пример последовательности KeyboardEvent

Рассмотрите последовательность событий, сгенерированную, когда мы взаимодействуем с клавишами Shift и 2 с использованием раскладки клавиатуры США, по сравнению с тем, когда мы делаем это с использованием британской раскладка клавиатуры.

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

  1. Нажмите и удерживайте клавишу Shift , затем нажмите 2 и отпустите. Затем отпустите клавишу Shift .
  2. Нажмите и удерживайте клавишу Shift , затем нажмите и удерживайте 2 . Отпустите клавишу Shift . Наконец, выпустите 2.

HTML

 >> очистить консоль> class = "flex">>>  

CSS

  {-webkit-display: flex;  дисплей: гибкий;  маржа слева: -20 пикселей;  маржа справа: -20 пикселей;} {отступ слева: 20 пикселей;  padding-right: 20px;} {ширина: 30%;} {-webkit-flex: 1;  flex: 1;} {дисплей: блок;  ширина: 100%;  margin-bottom: 10px;}  

JavaScript

  let textarea = document.getElementById  ('test-target'), consoleLog = document.getElementById ('console-log'), btnClearConsole = document.getElementById ('btn-clear-console'); функция logMessage (сообщение) {document.getElementById ("console-log  ") .innerHTML + = message +" 
";} textarea.addEventListener ('keydown', (e) => {if (! e.repeat) logMessage (` Key "$ {e.key}" нажато [ event: keydown] `); else logMessage (` Key "$ {e.key}" повторяется [event: keydown] `);}); textarea.addEventListener ('beforeinput', (e) => {logMessage (` Key "$ {e.data}" собирается ввести [событие: beforeinput] `);}); textarea.addEventListener ('input', (e) => {logMessage (` Key "$ {e.data}" input [событие: ввод] `);}); textarea.addEventListener ('keyup', (e) => {logMessage (` Ключ "$ {e.key}" выпущен [event: keyup] `);}); btnClearConsole .addEventListener ('click', (e) => {let child = consoleLog.firstChild; while (child) {consoleLog.removeChild (child); child = consol eLog.firstChild; }});

Результат

Примечание. В браузерах, которые не полностью реализуют интерфейс InputEvent , который используется для beforeinput и input , вы можете получить неверный вывод в этих строках вывода журнала.

Случай 1

При нажатии клавиши Shift сначала запускается событие keydown , а значение свойства key устанавливается равным строке Shift . Поскольку мы продолжаем удерживать эту клавишу, событие keydown не продолжает повторяться, потому что оно не создает символьную клавишу.

Когда клавиша 2 нажата, другое событие keydown запускается для этого нового нажатия клавиши, и значение свойства key для события устанавливается равным строке @ для типа клавиатуры США и " для типа клавиатуры Великобритании, поскольку активный модификатор shift . События beforeinput и input запускаются следующим образом, поскольку была создана символьная клавиша. /p>

Когда мы отпускаем клавишу 2 , запускается событие keyup и клавиша свойство будет поддерживать строковые значения @ и " для различных раскладок клавиатуры соответственно.

Поскольку мы наконец выпускаем shift , для нее запускается другое событие keyup , а значение атрибута ключа остается Shift .

Случай 2

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

Когда клавиша 2 нажата, другой keydown запускается для этого нового нажатия клавиши, а значение свойства key для этого события устанавливается как строка @ для типа клавиатуры США и " для типа клавиатуры Великобритании из-за активной клавиши-модификатора shift . beforeinput и события input beforeinput и input запускаются следующими, потому что была создана символьная клавиша. Поскольку мы продолжаем удерживать клавишу , событие keydown продолжает срабатывать неоднократно, а для свойства KeyboardEvent.repeat установлено значение true . beforeinput и input также запускаются неоднократно.

Когда мы отпускаем клавишу shift , для него запускается событие keyup , а значение ключевого атрибута остается Shift . На этом этапе обратите внимание, что значение свойства key для повторяющегося события нажатия клавиши key 2 теперь равно «2», поскольку модификатор Shift больше не активен. То же самое касается свойства InputEvent.data событий beforeinput и input .

Когда мы наконец отпускаем кнопку key 2 , запускается событие keyup , но для свойства key будет установлено значение строковое значение 2 для обеих раскладок клавиатуры, поскольку клавиша-модификатор shift больше не активна.

Пример

В этом примере используется EventTarget.addEventListener () для прослушивания событий keydown . Когда они возникают, значение ключа проверяется, чтобы увидеть, является ли он одним из ключей, который интересует код, и если да, он каким-то образом обрабатывается (возможно, путем управления космическим кораблем, возможно, путем изменения выбранной ячейки в электронной таблице. ).

  window.addEventListener ("keydown", function (event) {if (event.defaultPrevented) {return;} switch (event.key) {case "Down"  : case «ArrowDown»: разрыв; case «Up»: case «ArrowUp»: разрыв; case «Left»: case «ArrowLeft»: разрыв; case «Right»: case «ArrowRight»: разрыв; case «Enter»: разрыв  ; case "Esc": case "Escape": break; default: return;} event.preventDefault ();}, true);  

Технические характеристики

Спецификация Статус Комментарий
События пользовательского интерфейса
Определение KeyboardEvent.key в этой спецификации.
Рабочий проект
Объектная модель документа (DOM), уровень 3 Даже Спецификация ts
Определение KeyboardEvent.key в этой спецификации.
Устарело Первоначальное определение, включены ключевые значения.

Совместимость с браузером

Таблицы BCD загружаются только в браузере

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