我正在处理此特殊输入,我需要允许/禁止用户键入某些键。
我正在对onKeyDown处理程序进行验证。
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。
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移动设备上测试时,我得到的数字完全不同:
keyCodes
例:
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
keyCode
229
UPDATE1:
刚刚测试过,event.charCode但每个关键日志都记录为charCode: 0
event.charCode
charCode: 0
UPDATE2:
在此链接上:https : //javascript.info/keyboard-events 我的Android Chrome移动版中的每个键都显示为Unidentified。真奇怪
Unidentified
UPDATE3:
这是Chrome移动版的问题。Firefox Mobile可以完美地处理它。尚未在其他浏览器上进行测试。
在Android版Chrome浏览器中,键码始终为零
并在2012年的Chromium中报告了此错误:
https://bugs.chromium.org/p/chromium/issues/detail?id=118639
题
检测在每个键盘,浏览器或系统上均应使用的键入键的通用方法是什么?
根据我所做的所有研究,以下是答案:
如果您打算 在Android 上支持 Chrome Mobile ,请 不要 使用onKeyDown(可能还有其他KeyboardEvents诸如onKeyPres和onKeyUp),因为您 将无法读取正在键入的键。
KeyboardEvents
onKeyPres
onKeyUp
这是一个 Chromium 错误。在我的 Samsung Internet 上也是如此,因为它也是基于Chromium的。
自2012年以来,关于此主题的一个关于Chromium的问题就已经存在。我正在2020年撰写此问题。
在过去的8年中,一直在进行激烈的讨论。
在 Android Firefox 中不会发生此问题,但是以某种方式在Chromium中解决这并不是一件容易的事。不知道为什么。
我一直在寻找解决方案,因为当您event.preventDefault在onKeyDown处理程序内部调用时,您不会出现插入符号跳转(至少在Mobile Chrome上没有)。如果要在onChange处理程序中固定输入值,则需要处理插入符号跳转。
event.preventDefault
onChange
我最终处理了插入符号跳。