如何使用事件处理程序从Android获取密钥代码

Question

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

它在PC上完美工作，但在Android Google Chrome上不工作。

我进行了一些研究，发现Onkeydown和OnKeyup在Android上无法正常工作 - 事件是触发的，但两个处理程序返回KeyCode 229和Key"未识别。显然与Auto有关的是Android或类似的东西，。

我已经尝试了OnKeypress，它根本没有触发。

最后我尝试了输入。它触发了，但没有密钥代码或键，目标是空的。

我应该如何从Android上的输入事件处理程序获得值/键/键代码？

这是我的形式：

<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')} />

这是我的活动处理程序：

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

Answer 1

好，所以看起来像是react/jsx on Intput返回的数据与vanilla js" input"事件不同。

我已经在componentdidmount上添加了一个事件侦听器，现在我能够使用event.data

检索输入信息

现在它也在Android Google Chrome上工作。

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

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