HTML: Why does the Android browser show “Go” instead of “Next” on the keyboard?

Question

I have an HTML login form containing the following elements (in that order):

• input type=text
• input type=password (password)
• input type=submit (enter button)

Why does the Android browser display the Go button on the soft keyboard instead of the Next button when the focus is in text input ? This leads to the fact that the user cannot log in very easily, because after entering the user name, the user presses the lower right button on the keyboard (usually the correct action), and the form will be sent with an empty password, which, obviously, will not work, [It would be wise if my browser were configured to remember passwords and the password manager could fill in the password. However, here it’s not how you can check yourself below.]

I would like the input type text to have a “Next” button and the input type password (last login before sending) to have a “Go” button.

An example of a problematic form is https://peda.net/:login (this form contains code for detecting the Enter key for input and prevents the form from being submitted unless the last view of the visible form is focused).

Do you know a real solution to this problem? I know that if I used my own application, I would use android:imeOptions="actionNext" (see How to change the Android function key keyboard and the "Go" button to "Next" .). However, in this case it is an HTML form and the default browser is Android.

The problem is visible at least in the following configurations:

• System application "Browser" running on Android 2.3.4 (Cyanogenmod 7)
• System application "Browser" running on Android 4.2.2 (Cyanogenmod 10.1)
• System application "Browser" running on Android 4.3.1 (Cyanogenmod 10.2 M1)
• System application "Browser" (AOSP Browser), running on Android 4.4.2 (Cyanogenmod 11.0 M3)
• System application "Browser" (AOSP browser) running on Android 5.5.1 (Cyanogenmod 12.1) [has an arrow icon instead of the word "Go"]
• System application "Browser" (AOSP Browser), running on Android 6.0.1 (Cyanogenmod 13.0) [has an arrow icon instead of the word "Go"]

Answer 1

The Android browser always displays Go for input fields, because in some forms on the Internet (especially in search boxes) there is no submit button, and it can only be activated by pressing Enter (Go is equivalent to Enter).

Instead of some versions of Android, a tab key will be displayed in the lower right corner of the keyboard to simplify navigation between form fields.

I do not think that you can prevent any of these behaviors.

Possible workarounds:

• Use JavaScript to ignore submitting an entry form until both inputs are blank:

   <form name="loginForm" onsubmit="return document.loginForm.user.value != '' && document.loginForm.pass.value != ''"> <input type="text" name="user"> <input type="password" name="pass"> <input type="submit" value="Login"> </form> 

• The cleanest solution is to set both inputs that are required using the new HTML5 attribute - but the Android browser does not yet support it. However, a good approach would be to supplement the required attribute with a backup of JavaScript, such as that described in CSSKarma .

Answer 2

To add an answer to John, Android always adds “Go” to text inputs and always adds “Next” to numbers. I would like to hear how the person responsible for this choice explains his logic.

The softkeyboard design in this regard is just lousy, because every user with whom I have tested so far thought that the big blue button on the keyboard should be a button that will lead you to the next form field, and then in the last form the field allows you to send form.

iOS is even worse in this regard, as they offer a “Go” button with each form field and cannot insert fields. It's nice that Apple likes to make computers simple for people, but sometimes believing that people like it just can obscure all the idiots in the supposed people.

Sorry this is rant. I have something constructive suggestion:

If your last form field is of type = number, that is, a tiny hack that will work on both Android and iOS: add invisible text to the form using onfocus = "$ ('# thisForm') .. Send (); " On Android, this field will flash briefly: on iOS, it will not. To make the Android situation more acceptable, you can either set the value for text input as “Close this form” or set its width to 0, which will cause the form field to be not quite 0 wide, but still very small.

Awful hack, but hey, blame it on the user interfaces on Google and Apple.

Answer 3

see Replace the Go button on the soft keyboard with Next in Phonegap .

For quick navigation see this plunker . To execute the full code

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <form action="" id="form"> First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> <select name="select" readonly="readonly"> <option>Select Something</option> </select> Last name: <input type="text" name="lastname" disabled="disabled"> Select <select name="select" id="selectBox"> <option>Select Something</option> </select> Last name: <input type="text" name="lastname"> Select <select name="select" readonly="readonly"> <option>Select Something</option> </select> <button type="submit">Submit</button> </form> <script> (function($) { $.fn.enterAsTab = function(options) { var settings = $.extend({ 'allowSubmit': false }, options); $(this).find('input, select, textarea, button').live("keydown", {localSettings: settings}, function(event) { if (settings.allowSubmit) { var type = $(this).attr("type"); if (type == "submit") { return true; } } if (event.keyCode == 13) { var inputs = $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])"); var idx = inputs.index(this); if (idx == inputs.length - 1) { idx = -1; } else { inputs[idx + 1].focus(); // handles submit buttons } try { inputs[idx + 1].select(); } catch (err) { } return false; } }); return this; }; })(jQuery); $("#form").enterAsTab({ 'allowSubmit': true}); </script> 

NOTE. Remember to replace the jQuery .live() method with .on() when using a newer version of jquery than 1.9.

Answer 4

This is a Chromium problem if you want to see it: https://bugs.chromium.org/p/chromium/issues/detail?id=410785

Below is a workaround for Android that modifies "enter" in user input so that it "tabs" in the password field (and does not 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 places Android in UA, so testing is required for testing on Windows Phone (and Android Firefox).

Answer 5

To avoid confusion for the user, press the GO button as the enter button.

To do this, use the form tag, but to avoid incomplete submissions, use the disabled attribute on the submit button.

 $("input:not(.submit)").bind('input',function(){ var isValid = validateInputs(); if(isValid) { $('.submit').removeAttr('disabled'); } else { $('.submit').attr('disabled','disabled'); } }); 

Now, to avoid reloading the page, do not use the action or onsubmit attributes in the form tag, use instead

 $('#formid').submit(function(){ var disabled=$('.submit').attr('disabled'); if(disabled=='disabled') { return; } callOnSubmitFunction(); return false; } ); 

return false is important here to avoid reloading the page.

with the exception of chrome, firefox and the default browsers for Android show the previous and next buttons that will work as tab buttons, so use the appropriate tabindex attributes on the form input element.

Answer 6

We cannot prevent this default behavior because there is currently no type="next" tag available in HTML. Thus, by default, the Go button appears. Below is a link with a list of available login type tags: http://www.w3schools.com/tags/att_input_type.asp