HTML: Why does Android browser show "Go" instead of "Next" in keyboard?
I have an HTML login form that contains following elements (in this order):
input type=text(user name input)input type=password(password)input type=submit(Login button)
Why does the Android browser show "Go" button in soft keyboard instead of "Next" button when the focus is in the text input? This causes user to fail to login very easily because after entering the user name, the user presses the bottom right button in the keyboard (usually the correct action) and the form will be submitted with an empty password, which obviously is not going to work. [This behavior would make sense in case my browser was set to remember passwords and the password manager would be able to fill in the password. However, this is not the case here as you can test yourself below.]
I'd like to have the input type text to have "Next" button and the input type password (the last input before the submit) to have the "Go" button.
An example of problematic form is at https://peda.net/:login (this form contains code to detect "Enter" key for the input and prevents submitting the form unless the last visible form input is focused).
Do you know a real fix for this issue? I know that if I were implementing native application, I'd use android:imeOptions="actionNext" (see How to change the Android softkey keyboard "Go" button to "Next"). However, in this case it's an HTML form and Android default browser.
The problem is visible with at least following configurations:
- "Browser" system app running on Android 2.3.4 (Cyanogenmod 7)
- "Browser" system app running on Android 4.2.2 (Cyanogenmod 10.1)
- "Browser" system app running on Android 4.3.1 (Cyanogenmod 10.2 M1)
- "Browser" system app (AOSP Browser) running on Android 4.4.2 (Cyanogenmod 11.0 M3)
- "Browser" system app (AOSP Browser) running on Android 5.5.1 (Cyanogenmod 12.1) [has an arrow icon instead of word "Go"]
- "Browser" system app (AOSP Browser) running on Android 6.0.1 (Cyanogenmod 13.0) [has an arrow icon instead of word "Go"]
Answer
To add to John's answer, Android always adds 'Go' to text inputs and always adds 'Next' to number inputs. I'd love to hear the person responsible for this choice explain their logic.
The softkeyboard design is just lousy in this respect, because every user I've tested with so far has thought the big blue button in the keyboard must be the button that takes you to the next form field and then at the last form field lets you submit the form.
iOS it's even worse in this respect, since they offer a 'Go' button with every form field and no way to tab through the fields. It's nice that Apple likes to make computers simple for people, but sometimes assuming that people like it simple can shade into presuming people are all idiots.
Sorry about that rant. I do have something constructive to offer:
If your last form field happens to be type=number, then there is a tiny hack that will work on Android as well as iOS: add an invisible text input to the form with onfocus="$('#thisForm').submit();". In Android this field will briefly flash into view: in iOS it wont. To make the Android situation more palatable, you can either set a value for the text input like "Closing this form", or you can set its width to 0, which will cause the form field to be not quite 0 width but still very small.
Horrible hack, but hey, blame it on the UI people at Google and Apple.