Question

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

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

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

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

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

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

这是我的表格：

<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 onInput返回的数据不同于原始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;
    }

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

1 个答案: