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

【问题标题】：How to get KeyCode from Android using event handlers?如何使用事件处理程序从 Android 获取 KeyCode？
【发布时间】：2019-04-29 20:24:33
【问题描述】：

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

它在 PC 上完美运行，但在 Android Google Chrome 上却不行。

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

我试过 onKeyPress 根本没有触发。

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

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

这是我的表格：

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

【问题讨论】：

标签： javascript reactjs event-handling

【解决方案1】：

好的，看起来 React/JSX onInput 返回的数据与普通 JS“输入”事件不同。

我在 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;
    }

【讨论】：