检测不同系统和键盘上键入的键的最佳方法？ Chrome移动版KeyCode错误 [英] Best way to detect typed key on different systems and keyboards? Chrome mobile keyCode bug

问题描述

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

I'm working on this special input and I need to allow / disallow some keys from being typed by the user.

我正在对 onKeyDown 处理程序。

这是我刚开始做的事情：

This is what I was doing at first:

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();
  }
}

但是我担心键的字符串名称跨浏览器不一致，所以有人在这里告诉我，我应该更改为 event.keyCode 而不是 event.key 。

But I was worried that the string names of the keys were not consistent across browsers, so someone here on SO told me that I should change to event.keyCode instead of event.key.

在此链接上，我可以检查每个关键代码：
https://www.w3.org/2002/09/tests/keys.html

And on this link I could check each key code: 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桌面上使用，但是

Anyway, both options were working on Chrome Desktop, but failing in Chrome Mobile.

当我从Android移动设备上测试 keyCodes 时，我得到了完全不同的数字：

When I test the keyCodes from my Android mobile device I get completely different numbers:

示例：

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 Mobile上，所有数字，逗号和点似乎都在229 的形式返回 keyCode = https://www.w3.org/2002/09/tests/keys.html rel = nofollow noreferrer> https://www.w3.org/2002/09/tests/keys.html

PS: On Android Mobile, all the digits, comma and point seem to return keyCode as 229 on https://www.w3.org/2002/09/tests/keys.html

UPDATE1：

仅使用 event.charCode 测试过，但每个键都记录为 charCode：0

Just tested with event.charCode but every key logs as charCode: 0

UPDATE2：

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

UPDATE3：

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

This is an issue with Chrome Mobile. Firefox Mobile handles it perfectly. Haven't tested on other browsers.

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

而该错误已在2012年的Chromium中报告：

And this bug was reported in Chromium in 2012:

https：//bugs.chromium .org / p / chromium / issues / detail？id = 118639

问题

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

What is the universal way to detect the typed key that should work on every keyboard, browser or system?

推荐答案

从我所做的所有研究中，得到的答案是：

From all the research that I did, here is the answer:

如果您计划在Android上支持 Chrome Mobile ，请勿使用 onKeyDown （以及其他 KeyboardEvents ，例如 onKeyPres 和 onKeyUp ），因为您将无法阅读

If you plan to support Chrome Mobile on Android, DO NOT use onKeyDown (and probably other KeyboardEvents such as onKeyPres and onKeyUp) because you will not be able to read the keys that are being typed.

这是一个 Chromium 错误。在我的 Samsung Internet 上也发生了同样的事情，因为它也是基于Chromium的。

This is a Chromium bug. The same happens on my Samsung Internet, since it's also Chromium-based.

自2012年以来，关于Chromium的这个主题就存在一个问题。我在2020年写这篇文章。

There's an issue opened about this topic on Chromium since 2012. And I'm writing this in 2020.

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

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

And there are heated discussions going on in there for the past 8 years.

在 Android Firefox 中不会发生此问题，但是从某种意义上来说这并不是一件小事在Chromium中修复的问题。不知道为什么。

This problem does not happen in Android Firefox, but somehow this is not a trivial thing to fix in Chromium. Don't know why.

我一直在寻找解决方案，因为当您致电 onKeyDown 处理程序内的> event.preventDefault 中，您不会出现插入符号跳转（至少在没有的Chrome浏览器上）。如果要在 onChange 处理程序中固定输入值，则需要处理插入符号跳转。

I was looking for a solution for this, because when you call event.preventDefault inside the onKeyDown handler, you do not get a caret jump (at least on Mobile Chrome you don't). While if you are fixing the input value in the onChange handler you will need to deal with caret jumps.

I最终解决了插入符号跳转。

I've ended up dealing with the caret jumps.

这篇关于检测不同系统和键盘上键入的键的最佳方法？ Chrome移动版KeyCode错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！