Лучший способ обнаружить типизированный ключ на разных системах и клавиатурах? Chrome ошибка мобильного ключевого кода - PullRequest
Новая
       7

Лучший способ обнаружить типизированный ключ на разных системах и клавиатурах? Chrome ошибка мобильного ключевого кода

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

Я работаю над этим специальным вводом, и мне нужно разрешить / запретить ввод некоторых клавиш пользователем.

Я выполняю проверку на обработчике onKeyDown.

Это то, что я делал вначале: 

const ALLOWED_KEYS = [
  "Ctrl", "Meta", "Shift","Home", "End", 
  "Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab", 
  "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", 
  ".", ","
];

function onKeyDown(event) {
  if (ALLOWED_KEYS.indexOf(event.key) === -1) {
    event.preventDefault();
  }
}

Но я волновался, что строковые имена ключей не были согласованы во всех браузерах, поэтому кто-то из SO сказал мне, что я должен перейти на event.keyCode вместо event.key.

И по этой ссылке я мог проверить каждый код ключа: https://www.w3.org/2002/09/tests/keys.html

const DIGITS_COMMA_POINT_KEY_CODES = [
  48,49,50,51,52,53,54,55,56,57,        // 0-9 NORMAL KEYBOARD
  96,97,98,99,100,101,102,103,104,105,  // 0-9 NUMERIC KEYPAD
  110,188,                              // COMMA NORMAL AND NUMERIC KEYPAD
  190,194                               // POINT NORMAL AND NUMERIC KEYPAD
];

function onKeyDown(event) {
  if (DIGITS_COMMA_POINT_KEY_CODES.indexOf(event.keyCode) === -1) {
    event.preventDefault();
  }
}

В любом случае оба варианта работали на Chrome Рабочий стол, но с ошибкой в ​​Chrome Mobile.

Когда я тестирую keyCodes с моего Android мобильного устройства, я получаю совершенно разные цифры:

Пример: 

KEY CODES FOR THE CHAR "0"

DESKTOP NORMAL KEYBOARD : 48
DESKTOP NUMERIC KEYPAD : 96
ANDROID MOBILE KEYBOARD : 229  (EVERY DIGIT SHOW AS 229)

-----------------

KEY CODES FOR THE CHAR "," (COMMA)

DESKTOP NORMAL KEYBOARD : 188
DESKTOP NUMERIC KEYPAD : 110
ANDROID MOBILE KEYBOARD : 229   (EVERY DIGIT, COMMA AND POINT SHOW AS 229)

PS: Вкл. Android Мобильный, все цифры, запятая и точка, кажется, возвращают keyCode как 229 при https://www.w3.org/2002/09/tests/keys.html

ОБНОВЛЕНИЕ1:

Только что протестировано с event.charCode, но каждый ключ регистрируется как charCode: 0

ОБНОВЛЕНИЕ2:

По этой ссылке: * 1 047 * Каждый ключ моего Android Chrome мобильного телефона отображается как Unidentified. Это странно.

ОБНОВЛЕНИЕ 3:

Это проблема с Chrome Mobile. Firefox Мобил отлично с этим справляется. Не тестировался в других браузерах.

Код ключа всегда равен нулю в Chrome для Android

И эта ошибка была зарегистрирована в Chromium в 2012 году:

https://bugs.chromium.org/p/chromium/issues/detail?id=118639

ВОПРОС

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

1 Ответ

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

Из всех исследований, которые я провел, вот ответ:

Если вы планируете поддерживать Chrome Мобильный на Android, НЕ используйте onKeyDown (и, возможно, другие KeyboardEvents, такие как onKeyPres и onKeyUp), потому что вы не сможете прочитать набираемые клавиши.

Это Хром ошибка. То же самое происходит с моим Samsung Inte rnet, так как он также основан на Chromium.

С 2012 года существует проблема, связанная с этим topi c в Chromium. И я пишу это в 2020 году.

https://bugs.chromium.org/p/chromium/issues/detail?id=118639

И последние 8 лет идут горячие дискуссии.

Эта проблема не случается в Android Firefox, но как-то это не тривиальная вещь, которую нужно исправить в Chromium. Не знаю почему.

Я искал решение для этого, потому что когда вы вызываете event.preventDefault внутри обработчика onKeyDown, вы не получаете скачок каретки (по крайней мере, на мобильном телефоне). Chrome вы не) Хотя, если вы фиксируете входное значение в обработчике onChange, вам нужно будет справиться с переходами каретки.

В итоге я справился с прыжками каретки.

...