关于javascript：如何使用事件处理程序从Android获取KeyCode？

How to get KeyCode from Android using event handlers?

我正在构建一个具有4个不同输入的屏幕，每个输入1个字符。当用户键入字符时，光标应自动移动到下一个输入。

它可以在PC上正常运行，但不能在Android Google Chrome上运行。

我研究了一下，发现onKeyDown和onKeyUp在Android上无法正常工作-事件被触发，但是两个处理程序均返回keyCode 229和键" Unidentified。这显然与Android的自动提示键盘或类似的东西有关。

我尝试过onKeyPress，但它根本不会触发。

最后我尝试了onInput。它会触发，但是没有keyCode或key，并且target.value为空。

如何从Android上的输入事件处理程序中获取value / key / keyCode？

这是我的表格：

1
2
3
4

<input autoFocus className="shadowed color-blue" type="text" maxLength="1" id="first" onInput={(e) => this.moveOnMax(e,'first','second')} />
<input className="shadowed color-red" type="text" maxLength="1" id="second" onInput={(e) => this.moveOnMax(e,'first','third')} />
<input className="shadowed color-yellow" type="text" maxLength="1" id="third" onInput={(e) => this.moveOnMax(e,'second','fourth')} />
<input className="shadowed color-green" type="text" maxLength="1" id="fourth" onInput={(e) => this.moveOnMax(e,'third','fourth')} />

这是我的事件处理程序：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

moveOnMax (event, previousFieldID, nextFieldID) {
event.preventDefault();

if (event.which === 37) //left arrow key
document.getElementById(previousFieldID).focus();
else if (event.which === 39) //right arrow key
document.getElementById(nextFieldID).focus();
else if (event.which === 8) { //backspace
event.currentTarget.value ="";
document.getElementById(previousFieldID).focus();
}

if (event.which >= 48 && event.which <= 105) {//valid character, fill the form
if (event.currentTarget.value.length === 0) {
event.currentTarget.value = event.key.toUpperCase();
document.getElementById(nextFieldID).focus();
} else {
document.getElementById(nextFieldID).value = event.key.toUpperCase();
document.getElementById(nextFieldID).focus();
}
}
}

好吧，所以看起来React / JSX onInput返回的数据不同于原始JS" input"事件。

我在ComponentDidMount上添加了一个事件监听器，现在我可以使用event.data

检索输入信息。

现在它也可以在Android Google Chrome上运行。

1
2
3
4
5
6

componentDidMount() {
document.getElementById("fifth").addEventListener("input", this.moveOnMax);
document.getElementById("sixth").addEventListener("input", this.moveOnMax);
document.getElementById("seventh").addEventListener("input", this.moveOnMax);
document.getElementById("eighth").addEventListener("input", this.moveOnMax);
}

1
2
3

moveOnMax (event) {
let key = event.key ? event.key : event.data;
}