Behavior of "enter/next" key on mobile browsers when entering into a number field

Question

I've got a single line of code (no forms involved) here:

<input type="number" min="0" max="9999999" id="inSku" name="inSku">

Before, I was using type="text", but on mobile browsers that gave the full keyboard by default and the box in question only takes number inputs. Logically, the mobile browsers will change to an only-number keyboard when they focus on a type="number" field - however, I am currently relying on a little bit of jQuery to handle the submission of the content of the form. Here's that code:

$("#inSku").keyup(function (event) {
    if (event.keyCode == 13) {
        ringItem();
    }
});

The problem here being that on the stock android phone keyboard (and I'm assuming a good number of other mobile browsers) - when using the "number" keyboard, the enter key that is on the regular alphanumeric android keyboard has changed to a "next" button. This button in my case takes the text input and sticks it in the address field, not exactly ideal. Is there any way to harness the next button on the keyboard and get that to execute my other javascript function?

Opiumism

For the people who come here looking for the exact keycode as well: The keycode of the next key on Chrome Android is 9 (which is the tab key on desktop keyboards). – Layer

Answer 1

Try

 $('#inSku').keyup(function (e) {
   alert('Key pressed: ' + e.keyCode);
 });

The idea here is to press the next button and find that key code. Once you do, you can add it to your logic like if (event.keyCode === 13 || event.keyCode === ...). You can add as many qualifiers as you need to to support multiple keypads and devices.

Geronimo

On Android 4.2.x, on a Samsung S4, it works only with keydown event, not keyup. – Toth

In my case OnePlus 6 doesn't seem to trigger keydown or keyup event for the 'next' button – Compotation

Answer 2

This is actually android/chrome detecting the second input on the page and assuming you want to keep filling out the form. How helpful.

The behavior you're experiencing is enterkeyhint="next" which as the comment above indicates is code for the enter key to press "Tab"/key code 9 for the user.

Disable this by using the enterkeyhint property set to "done" or "search" or "enter"

e.g. <input type="text" enterkeyhint="enter" />

Markle