How to get KeyCode from Android using event handlers?

Question

I'm building a screen that has 4 different inputs, 1 character each. When the user types a character, the cursor should be automatically moved to the next input.

It's working perfectly on PC but not on Android Google Chrome.

I researched a bit and found out that onKeyDown and onKeyUp doesn't work properly on Android - the events are triggered but both handlers return keyCode 229 and key "Unidentified. It's apparently related to auto suggest keyboard from Android or something like that.

I've tried onKeyPress and it doesn't trigger at all.

Lastly I've tried onInput. It triggers but there's no keyCode or key and the target.value comes empty.

How should I get the value/key/keyCode from input event handler on Android?

Here's my form:

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

Here's my event handler:

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

Felipe Zanon do Nascimento Felipe Zanon do Nascimento · Accepted Answer · 2019-04-30T04:11:46

Ok, so it looks like React/JSX onInput returns different data than vanilla JS "input" event.

I've added an event listener on ComponentDidMount and now I was able to retrieve input information using event.data

Now it's working on Android Google Chrome as well.

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

How to get KeyCode from Android using event handlers?

1 Answers