Html: Why Does Android Browser Show "Go" Instead of "Next" in Keyboard

HTML: Why does Android browser show Go instead of Next in keyboard?

This is the Chromium issue if you want to watch it: https://bugs.chromium.org/p/chromium/issues/detail?id=410785

Here is a workaround for Android that changes the "enter" in the user input so that it "tabs" to the password field (and doesn't submit the form):

http://jsbin.com/zakeza/1/quiet

<form action="?">
User <input type=text onkeypress=key(event)><br><br>
Password <input id=pw type=password><br><br>
<input type=submit>
</form>

<script>
function key(event) {
if (event.charCode == 13 && /Android/.test(navigator.userAgent)) {
event.preventDefault();
document.getElementById('pw').focus();
}
}
</script>

Edit: Note Windows Phone also puts Android into the UA, so needs testing that works on Windows Phone (and Android Firefox).

How to stop Go button being replaced with Next - Chrome Android Browser App

I ran into this issue and the solution I found was to simply set type="search" instead of type="text" on the inputs.

Inspired from: Show 'Search' button in iPhone/iPad Safari keyboard

Show Go instead of Next in Chrome soft keyboard for input type=number

Nope. It' s a bug in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=410785

Duplicate of: HTML: Why does Android browser show "Go" instead of "Next" in keyboard?

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

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


Related Topics



Leave a reply



Submit