How to get Next button on android softkeyboard in place of Go Button in phonegap

Question

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. is there any plugin for specifying that for android.

Answer 1

Having a "Next" button instead of "Go" is not possible with Android as of now.

Android will always display "Go" button for form input fields. "Go" is basically reflecting the same behavior as of an "Enter" button on a normal browser & keyboard. You can achieve through below code:

if (event.keyCode == 13) {
           //Handling "Go" Button to move to next input field
       }

OR

If your input fields are more, then data-dependency will be best solution. If you want to prevent users from submitting the form, you can put required validations on the form using javascript, where you can specify data-dependency inside input field with required, which helps move cursor to a particular field which you specified in data-dependency.

<input type="text" id="first" data-dependency="second" />
<input type="text" id="second" data-dependency="third" />
<input type="text" id="third" />

It move focus to next fields in form until its your last field. Once last field reaches you can allow it to act as enter. So basically Go will keep moving focus to next fields until its your last field & then will submit the form.

Answer 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

Answer 3

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>