Javascript .`keypress` event not firing on mobile device

Question

On this page:

https://subnetipv4.com/

If you click on any of the input boxes in the "IP Address" column, and press the "." or "/" keys (period or slash) it jumps you to the next input box.

Or at least, it does on a desktop browser. On a mobile browser, it doesn't seem to register the onkeypress event.

This is the code that is enabling the "jump" on period or slash presses:

        // Function to jump to next box on . or / keys
        function jumpdot(event) {
            // Capture pressed key:
            var y = event.key;

            if (y == "." || y == "/" ) {
                // . or / was pressed, jump to next userinput box and prevent typing of . or /
                event.preventDefault();
                document.getElementsByName(uiNext)[0].focus();
            }
        }

Is there an easy way to enable that functionality on Mobile phones as well?

edit: Updated website URL

Orestes

Answer 1

The keypress event is marked as Legacy in the DOM-Level-3 Standard.

Warning. The keypress event type is defined in this specification for reference and completeness, but this specification deprecates the use of this event type.

Use the keydown event instead. Info: Keydown Event in Mozilla Developer

You should also consider ...

KeyboardEvent.which : Warning: This attribute is deprecated; you should use KeyboardEvent.key instead, if available.

KeyboardEvent.keyCode : Warning: This attribute is deprecated; you should use KeyboardEvent.key instead, if available.

To read the pressed Key , use instead event.key

Gustin

I changed the onkeypress to onkeydown, also had to change the period and slash keycode (from 46/47 to 190/191). Thanks! But... when I changed var x = event.which || event.keyCode; to var x = event.key; it didn't work. Can you provide any more guidance? – Orestes

PS: I'm testing on practicalnetworking.net/subnet2.html if you want to take a look. – Orestes

Nevermind, event.key uses different key "codes". I updated the code and got that working. Thank for the tips, @Colxi. – Orestes

(sorry for 4 comments in a row) Unfortunately, this didn't help with the original issue -- the "jump to next box" on pressing period or slash still only works with desktop browsers and not mobile browsers =/. – Orestes

wich is the value of 'document.getElementsByName(uiNext)[0]' when you press the period or slash key ? Try to send ot to the console, to double check, the selector is not missbehaving – Gustin

I changed it to event.key, which returns "." and "/" when period or slash is pressed. I've updated my code to look for "." or "/" to trigger the jumpdot function. HOWEVER, on Mobile, I can press period or slash all I want and nothing happens. – Orestes

I switched from event.code to event.key and it works for android. – Brandling

Answer 2

ev.keyCode can be helpful. That provides more info about a keystroke.

Sacristan

But apparently it is deprecated, according to @Gustin 's answer . I've changed the code to event.key and that part is working. The mobile functionality is still not working. – Orestes

Answer 3

Use oninput: instead of onkeypress:.

Sweettalk

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Vet