Как получить KeyCode из Android, используя обработчики событий?

Question

Я строю экран с 4 различными входами, по 1 символу каждый.Когда пользователь вводит символ, курсор должен автоматически перемещаться к следующему вводу.

Он отлично работает на ПК, но не на Android Google Chrome.

Я немного исследовал и обнаружил, чтоonKeyDown и onKeyUp не работают должным образом на Android - события запускаются, но оба обработчика возвращают keyCode 229 и клавишу «Неизвестно». Это, очевидно, связано с автоматическим предложением клавиатуры из Android или чем-то в этом роде.

Я пробовалonKeyPress, и он вообще не запускается.

Наконец, я попробовал onInput. Он срабатывает, но нет ни кода, ни ключа, а target.value пусто.

Как мне получитьvalue / key / keyCode из обработчика события ввода на 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 onInput возвращает данные, отличные от события "input" ванильного JS.

Я добавил прослушиватель событий в ComponentDidMount, и теперь я смог получить входную информацию, используя событие.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;
    }