Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 376
taylorthurlow Avatar asked Nov 01 '22 14:11

taylorthurlow


1 Answers

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.

like image 163
beautifulcoder Avatar answered Nov 11 '22 19:11

beautifulcoder