html phonegap android : numeric soft keyboard has next instead of go button

Question

This is driving me crazy and I can't find the answer anywhere.

I have forms in my phonegap app. If the input type="text", the text keyboard pops up and "go" is displayed in the corner. When you click go, it submits the form. That all works as I would expect. But if I use input type="number", the number keyboard pops up and "next" is displayed in the corner. When you click next, if there is another input box before the button tag, it goes to that input. That's okay. . . not ideal, but makes sense. But if it is the last input field on the page, click "next" does nothing. It doesn't put focus on the button (even with tabindex) and it doesn't submit the form (ideal).

I'm using phonegap 1.3.0 and jquery 1.7 if any of that helps.

Answer 1

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.

Hope that helps!

Answer 2

Okay, now I do have something that looks like an answer and quacks like an answer.

It's a horrible hack, and I am experiencing some side-effects at this point, but it's a small leap for mankind anyway.

Add an invisible text input to your form, which automatically submits the form as soon as it receives focus. Since it can only receive focus from the user pressing 'Next' or tabbing from the last number field, there should be a pretty solid logic in the user sequence.

<input type='text' style="opacity:0;" onfocus="javascript:$('#thisForm').submit();">

The side effects are:

• the hidden form field will briefly be visible. You can avoid this by using the onfocus handler to also re-focus on the number field that was just left. Or you can set the width of the input to 0. The latter works best for me.
• if you're using jQueryMobile like me, you're inviting horrible page transition ugliness on yourself, so if your form is in a dialog and submitting the form closes the dialog, be sure to set the dialog transition (when it is being opened from a previous screen) to 'none'.