22

I am developing Phonegap application and have many inputs in application form. I am getting Go button on keyboard of android.I want to replace go button with next button. As clicking on Go button (as shown in image) submits form. In android native we can specify next button in XML but for Phonegap how to specify next button in place of go button.? Some Samsung devices have by default Next Prev button on top. By Default there is Go button. I need Next but in Phonegap

By Default there is Go button. I need Next but in Phonegap. is there any plugin for specifying that for android.

Deep Mehta
  • 1,250
  • 1
  • 16
  • 29
  • Check this : http://stackoverflow.com/questions/23470439/replace-go-button-on-soft-keyboard-with-next-in-phonegap – Siddharth_Vyas Jul 03 '14 at 12:35
  • @SiddharthVyas i have already looked upon that question it did not answered what i needed. but thank you for helping.! – Deep Mehta Jul 04 '14 at 14:32
  • Any update on this ? Am trying to change the Go to a Next button (with HTML/JS) for Android/any other mobile device. I know this is possible, I saw it on Stripe Checkout; here's the screenshot: http://pasteboard.co/1uyG9vOM.png – rousseauo Jun 07 '16 at 00:03
  • Stripe uses hybrid or native? – Deep Mehta Jun 07 '16 at 00:07
  • @DeepMehta In that case it's a webpage. But I found how they did, you only have to use type="number" It will give you the next arrow, but probably not what you want. :( So back to the "it's currently not possible". – rousseauo Jun 07 '16 at 01:08
  • Did you tested on Samsung device? – Deep Mehta Jun 07 '16 at 01:14

6 Answers6

5

have you tried the attribute enterkeyhint

The enterKeyHint property is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards. It reflects the enterkeyhint HTML global attribute and is an enumerated property, only accepting the following values as a DOMString:

  • 'enter' typically indicating inserting a new line.
  • 'done' typically meaning there is nothing more to input and the input method editor (IME) will be closed.
  • 'go' typically meaning to take the user to the target of the text they typed.
  • 'next' typically taking the user to the next field that will accept text.
  • 'previous' typically taking the user to the previous field that will accept text.
  • 'search' typically taking the user to the results of searching for the text they have typed.
  • 'send' typically delivering the text to its target.

If no enterKeyHint value has been specified or if it was set to a different value than the allowed ones, it will return an empty string.

The enterKeyHint property is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards. It reflects the enterKeyHint HTML global attribute and is an enumerated property, only accepting the following values as a DOMString:

<main>
  <h2>Using the <code>enterkeyhint</code> Attribute</h2>
  <p>View this demo on a mobile device. Note the text in the "enter" key on your mobile device's virtual keyboard.</p>
  <input type="text" enterkeyhint="Next">
</main>
Vasil Gerginski
  • 559
  • 1
  • 6
  • 15
2

Its been said that if have input fields without or outside the form tag means you will get next button as tab button

As far as i know there is no proper solution to get next button instead of go . There are only workarounds do it. Most common one is to capture the 'Go' button as enter key(keycode '13') in javascript and do your thing.

$('selector').on("keydown",function(event){
       if (event.keyCode == 9) {
           //you got tab i.e "NEXT" Btn
       }
       if (event.keyCode == 13) {
           //you got enter i.e "GO" Btn
       }
});

for tab button instead of enter

There has been also sources that already discusses these GO Vs NEXT button

Community
  • 1
  • 1
Sathya Raj
  • 1,079
  • 2
  • 12
  • 30
  • Yea i have handle the events based on key code. But i can't really afford to use input fields outside form tag. – Deep Mehta Jun 30 '14 at 18:28
  • @DeepMehta have you tried it? is Next button displaying ? ... It may be huge pay off to implement manually for form submit in javascript, but this wat you r asking for. As of now this is the only way to do it. – Sathya Raj Jul 01 '14 at 08:05
  • I did all manually coding all possibility. major issue was form submission on GO button press. then it was knowing which field to focus. took up lot of time. but still its not upto the mark. – Deep Mehta Jul 04 '14 at 14:30
  • Any update on this ? Am trying to change the Go to a Next button (with HTML/JS) for Android/any other mobile device. I know this is possible, I saw it on Stripe Checkout; here's the screenshot: http://pasteboard.co/1uyG9vOM.png – rousseauo Jun 07 '16 at 00:02
0

You can simply use the following logic to let users focus on the next input field. This is a better approach, which I used in my one of the PhoneGap applications, as currently there are no 3rd party plugins which offer such functionality. 

x$('#input1').on('keyup', function(e) {
 var mEvent = e || window.event;
 var mPressed = mEvent.keyCode || mEvent.which;
 if (mPressed == 13) {
  // On enter, go to next input field
   document.getElementById('input2').focus();
 }
return true;
});
MAST3RMIND
  • 592
  • 2
  • 14
0

For whom this may be of use:

I'm working on a react pwa and I was having issues getting the next button to show so users could move from one input element to the next (within the same screen). It turns out that android requires a <form> to be wrapping the input text elements. I did a series of tests:

  1. input texts inside a (no tabindex, no attributes other than type, nothing)
  2. input texts outside a (same as above)
  3. input texts inside a

    inside a

  4. input texts inside a

    outside a

Only those inputs inside a get android's default next-next-next-go behaviour where go = last input in the form.

Capagris
  • 3,811
  • 5
  • 30
  • 44
-1

Have you tried using the tabindex parameter on your input fields?

The default action of the keyboard should be to show next if tabindex is detected.

Example:

<input name="first" tabindex="1" /> //should show next

<input name="second" tabindex="2" />  //should show next

<input name="third" tabindex="3" />  //should show go
Dawson Loudon
  • 6,029
  • 2
  • 27
  • 31
-11

EditText android:imeOptions= "actionNext"

Romen
  • 1
  • 1