Являются ли значения «KeyboardEvent.key» в разных браузерах? - PullRequest
0 голосов
/ 15 апреля 2020

Я создаю этот компонент и полагаюсь на значения event.key в обработчике onKeyDown, чтобы разрешить / запретить некоторые входные данные.

DOCS:

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

const ALLOWED_KEYS = [
  "Ctrl", "Meta", "Shift","Home", "End", 
  "Backspace", "Delete", 
  "ArrowLeft", "ArrowRight", "Tab"
];

// ....

function onKeyDown(event) {
  if (ALLOWED_KEYS.indexOf(event.key) >= 0) {
    console.log("Allowed...");
  }
  else {
    event.preventDefault();
    console.log("NOT allowed...");
  }
}

Согласны ли эти имена в разных браузерах? Могу ли я быть уверен, что ArrowRight будет ArrowRight на Chrome, Edge, Firefox, Safari и др. c? Или я должен использовать какое-то кодовое значение key?

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

Здесь у вас есть все keycodes в соответствии с w3.org , которые являются кросс-браузерными. Это те ключевые коды, которые вы хотите использовать. Вы можете набрать arrowLeft, right или backspace или любое другое, чтобы найти соответствующую keyvalue для этой клавиши.

Этот инструмент очень удобен, поэтому вы можете сохранить эту ссылку где-нибудь.

0 голосов
/ 16 апреля 2020

В большинстве браузеров все должно работать нормально.

Имена соответствуют стандарту W3:

https://www.w3.org/TR/uievents-key/#named -key-attribute-values ​​

Но вы не сможете прочитать event.key или event.keyCode в Мобильный Chrome для Android.

В этом есть ошибка Chromium.

Длинное обсуждение в https://bugs.chromium.org/p/chromium/issues/detail?id=118639

...