React 输入 onKeyDown/onKeyUp Android Chrome

Question

我遇到的问题是我有一个 React 应用程序，其表单带有输入元素，我需要检测是否已按下 Enter 键或 , 。它在桌面 chrome 上运行良好，但在 Android chrome（三星 Note 9）上运行良好。首先，移动键盘不提供 Enter 键，而是提供 Next 或 Tab 键。当我检查事件时，移动设备未注册密钥、KeyCode 或 charCode。我尝试过 onKeyDown、onKeyUp、onKeyPress ，结果相似。

我构建了这个简单的示例来关注这个问题。

const handleKeyDown = (event)=>{
    event.preventDefault();
  console.log('Key: ' + event.key)
  console.log('KeyCode: ' + event.keyCode)
  console.log('CharCode: ' + event.charCode);
  console.log('Code: ' + event.code);
}

function App() {
  return (
    <div className="App">
      <h2>Test Input</h2>
<form action="">
<input id="sampleInput" type="text" onKeyDown={handleKeyDown}/>
<div>
<input id="sampleInput2" type="text" onKeyDown={handleKeyDown}/>
</div>
</form>
    </div>
  );
}

当我在第一个输入中输入 abc 时，我得到以下内容：

从移动控制台： 关键：未识别 密钥代码：229 字符代码：0

这对于所有按键都是一样的

Answer 1

在我的 React 应用程序中，我在尝试在

keyDown

元素上实现

input

事件监听器时遇到了同样的问题。

目标是捕获用户按下

Enter

或

Comma

的时间，然后提取输入值并将其附加到标签数组中。

keyDown

事件在 Android Chrome 浏览器 上无法正常运行，尽管它在其他网络浏览器、iOS 和 Android Firefox 上运行良好。

• 处理

  Enter

  键

在 Android Chrome 浏览器上，该事件报告

key = "Enter"

、

code = <empty>

和

keyCode = 13

。

解决方案 -> 我调整了代码以使用

key

而不是

code

（

keyCode

已弃用），并且效果很好。

 const handleTagKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault();
      const inputElement = e.target as HTMLInputElement;
      const tag = inputElement.value.trim();
      // adding value to tags array
    }
  };

• 处理

  Comma

  键

这很有挑战性，因为浏览器为逗号和许多其他键返回相同的值 -

key = "Unidentified"

、

code = <empty>

和

keyCode = 229

最终，我发现此行为是 Chromium 中的一个已知错误，标记为“无法修复”(https://issues.chromium.org/issues/41368867)。

解决方案 -> 为了解决此问题，我转而使用 onChange 事件。

• 该函数检查输入值末尾是否存在逗号。
• 然后提取不包括逗号的值并将其添加为标签。

  const handleTagOnChange = (e: ChangeEvent<HTMLInputElement>) => {
  const inputElement = e.target as HTMLInputElement;
  const inputValue = inputElement.value.trim();

  if (inputValue.endsWith(",")) {
    const tag = inputValue.slice(0, -1).trim();
    //  adding value to tags array
  }
};