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:
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).