小编典典

检测不同系统和键盘上键入的键的最佳方法?Chrome移动版KeyCode错误

reactjs

我正在处理此特殊输入,我需要允许/禁止用户键入某些键。

我正在对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移动版中无法使用。

当我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作为229https://www.w3.org/2002/09/tests/keys.html

UPDATE1:

刚刚测试过,event.charCode但每个关键日志都记录为charCode: 0

UPDATE2:

在此链接上:https :
//javascript.info/keyboard-events
我的Android Chrome移动版中的每个键都显示为Unidentified。真奇怪

UPDATE3:

这是Chrome移动版的问题。Firefox Mobile可以完美地处理它。尚未在其他浏览器上进行测试。

在Android版Chrome浏览器中,键码始终为零

并在2012年的Chromium中报告了此错误:

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

检测在每个键盘,浏览器或系统上均应使用的键入键的通用方法是什么?


阅读 285

收藏
2020-07-22

共1个答案

小编典典

根据我所做的所有研究,以下是答案:

如果您打算 在Android 上支持 Chrome Mobile ,请 不要
使用onKeyDown(可能还有其他KeyboardEvents诸如onKeyPresonKeyUp),因为您
将无法读取正在键入的键。

这是一个 Chromium 错误。在我的 Samsung Internet 上也是如此,因为它也是基于Chromium的。

自2012年以来,关于此主题的一个关于Chromium的问题就已经存在。我正在2020年撰写此问题。

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

在过去的8年中,一直在进行激烈的讨论。

Android Firefox 中不会发生此问题,但是以某种方式在Chromium中解决这并不是一件容易的事。不知道为什么。


我一直在寻找解决方案,因为当您event.preventDefaultonKeyDown处理程序内部调用时,您不会出现插入符号跳转(至少在Mobile
Chrome上没有)。如果要在onChange处理程序中固定输入值,则需要处理插入符号跳转。

我最终处理了插入符号跳。

2020-07-22