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

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’.