12

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.

grail143
  • 142
  • 1
  • 9
  • +1 on this, I am trying everything. Meanwhile PhoneGap is up to version 1.5.0 and I use jQueryMobile 1.0.1. No progress. I've tried if it is a consequence of any of the field attributes, but to no avail. – Wytze Apr 04 '12 at 17:57
  • Doesn't look like this is a PhoneGap issue -- it happens in the normal Android browser too. – JW. Aug 06 '12 at 23:04
  • It's true that this has nothing to do with phonegap. Though I would think there was a java based method to fix it because my app is phonegap. The only fix I have found so far is Wytze's hidden field that auto submits the form. It's a terrible hack, and meanwhile we are up to phonegap 2.0. I still find this a very obnoxious decision on the part of Android developers. – grail143 Aug 07 '12 at 13:45

2 Answers2

9

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!

Rum Jeremy
  • 502
  • 4
  • 15
5

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'.
Wytze
  • 7,844
  • 8
  • 49
  • 62
  • I was not able to hide the input by having width: 0 on an HTC G2 Android version 2.3.4. However, I was able to hide it using background-color: transparent;, and hide the annoying orange android focus border with -webkit-tap-highlight-color: rgba(255,255,255,0); http://stackoverflow.com/questions/5210481/disable-android-orange-outline-higlight-on-focus. – Bobby Sep 06 '12 at 18:56
  • Hacky but helpful! I hid the input by setting `position: absolute` – maGo Dec 01 '15 at 09:44
  • Take a look at the non hacky answer below http://stackoverflow.com/a/20253746/4296895 – ykay says Reinstate Monica Mar 28 '17 at 09:19