use enter key to submit form with numeric keypad of android / phonegap

Question

Having trouble with the soft "NUMERIC" keyboard on my android/phonegap application.

My goal: create a simple form on a html5 page (that I will use with phonegap), where the user enters a number using 0-9 characters. To do this, I have used an input field with type = number, and this generates the correct soft keyboard on my android phone.

Unfortunately, I've felt a huge amount of frustration trying to detect when the enter key is pressed on the numeric keyboard. Usually when pressed, instead of submitting the form, the keyboard just goes away. However, if I change the type of the input to "text" then the enter key works as expected and submits the form.

How can I reproduce form submission using the numeric keyboard?

For reference see: http://jsfiddle.net/Ua9yw/13/

WORKING ENTER SUBMISSION BEHAVIOR:

<form> <input type="text"/> </form>

<form id="form1">
    <input type="text"/>
    <input type="submit"/>
</form>

NOT WORKING ENTER BUTTON BEHAVIOR:

<form> <input type="number"/> </form>
<form id="form1">
    <input type="number"/>
    <input type="submit"/>
</form>

This seems to be a bug in the Android. Check this answer for a similar question: http://stackoverflow.com/a/10017095/438466 — Rabi, Jun 27 '13 at 12:16

score 6 · Answer 1 · answered Nov 27 '13 at 21:46

You can detect the next keyboard press by using the following bind in JQuery:

$('input').on('keydown', function(e){
    if(e.which === 9) {
        //your code here
    }
});

The next button emulates the tab keypress event on a keyboard, which is key code 9. Unfortunately, keypress and keyup events do not detect the next key event, so you need to bind it on keydown.

use enter key to submit form with numeric keypad of android / phonegap

1 Answers1