1. 技术文章
  2. HTML: Why does Android browser show “Go” instead of “Next” in keyboard?

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

由 耗尽温柔 提交于 2019-11-26 19:43:09
John Mellor

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

Instead some versions of Android will show a tab key in the bottom right of the keyboard to facilitate navigating between form fields.

I don't think you can prevent either of these behaviours.

Two possible workarounds:

  1. Use JavaScript to ignore submission of the login form until both inputs are non-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>

  2. The cleanest solution would be to set both inputs to be required using the new HTML5 required attribute - but the Android Browser doesn't support this yet. However a good approach would be to supplement the required attribute with a JavaScript fallback such as that described by CSSKarma.

Wytze

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.

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

vinesh

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

For a quick navigation see this plunker. To follow complete 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: don't forget to replace .live() method of jquery with .on() if using newer version of jquery than 1.9.

We can not prevent this default behavior because there is not input type="next" tag available in HTML as of now. So by default "Go" button appears. Below link having list of available input type tags: http://www.w3schools.com/tags/att_input_type.asp

To avoid confusion for user let GO button function as enter button only.

For this use a form tag but to avoid incomplete submissions use disabled attribute on submit button.

$("input:not(.submit)").bind('input',function(){
var isValid = validateInputs();

if(isValid)
                {
                    $('.submit').removeAttr('disabled');
                }
                else
                {
                    $('.submit').attr('disabled','disabled');
                }

});

Now To avoid page reload dont use action or onsubmit attributes in form tag, instead use

$('#formid').submit(function(){

var disabled=$('.submit').attr('disabled');
                if(disabled=='disabled')
                {
                    return;
                }

callOnSubmitFunction();
return false;
}
);

return false is important here to avoid page reload.

with the exception of chrome, the firefox and the default android browsers show a prev and next buttons which will work as tab buttons, so use proper tabindex atrributes on form input element.

标签
android
html
browser
android-softkeyboard
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!