HTML: 为什么安卓浏览器在键盘上显示“Go”而不是“Next”?

Question

我有一个HTML登录表单, 包含以下元素(按顺序):

• input type=text (用户名输入)
• input type=password (密码输入)
• input type=submit (登录按钮)

为什么在Android浏览器中, 当焦点位于text input时, 显示"Go"而不是"Next"按钮？这很容易导致用户无法登录, 因为在输入用户名后, 用户按下键盘的右下角按钮(通常是正确的操作), 表单将会提交带有空密码的信息, 这显然是行不通的。(如果浏览器设置为记住密码且密码管理器能够自动填充密码, 这种行为可能是有道理的。但事实并非如此, 你可以在下面的测试中验证。)

我想让输入类型为文本的字段显示"Next"按钮, 并使密码字段(即提交前的最后一个输入框)显示"Go"按钮。

存在问题的表单示例: https://peda.net/:login (该表单包含代码来检测输入的"Enter"键, 除非最后一个可见输入框处于聚焦状态, 否则将阻止提交表单)。

你知道如何真正解决这个问题吗？我知道如果我正在开发原生应用程序, 我会使用android:imeOptions="actionNext" (见如何将Android软键盘的"Go"按钮更改为"Next"). 但是, 在这种情况下, 这是一个HTML表单和Android默认浏览器。

此问题在以下至少两个配置中可见：

• 运行于Android 2.3.4(Cyanogenmod 7)上的"Browser"系统应用
• 运行于Android 4.2.2(Cyanogenmod 10.1)上的"Browser"系统应用

运行于Android 4.3.1（Cyanogenmod 10.2 M1）上的“浏览器”系统应用

运行于Android 4.4.2（Cyanogenmod 11.0 M3）上的“AOSP浏览器”系统应用

运行于Android 5.5.1（Cyanogenmod 12.1）上的“AOSP浏览器”系统应用[箭头图标代替"Go"文字]

运行于Android 6.0.1（Cyanogenmod 13.0）上的“AOSP浏览器”系统应用[箭头图标代替"Go"文字]

- Mikko Rantalainen

---

这个问题让我很感兴趣，所以我尝试了tabindex，但是没有起作用。 - EboMike

我想知道这种不当行为是否仍然是最先进的技术？ - danijar

й—®йўҳд»Қ然еӯҳеңЁдәҺиҝҗиЎҢеңЁAndroid 4.3.1дёҠзҡ„AOSPжөҸи§ҲеҷЁдёӯ - жҲ‘е·Із»Ҹжӣҙж–°дәҶжңҖж–°дҝЎжҒҜзҡ„й—®йўҳгҖӮ - Mikko Rantalainen

这个问题在Android 4.4.2上的Chrome 35仍然存在。这到底是Chrome/AOSP/Webkit的bug还是键盘的问题？我们应该向谁报告这个bug？令人惊讶的是，这个相当令人沮丧的UX问题在过去3年中几乎没有得到关注，尤其是当iOS已经解决了这个问题很长时间了。 - Kyle MacFarlane

我遇到了相反的问题；它显示“下一个”，但我想要“前往”。最终，我在表单中添加了一个按钮。 - chiliNUT

Answer 1

除了John的回答，Android始终在文本输入框中添加“Go”，并在数字输入框中始终添加“Next” 。我希望能听到负责选择此功能的人解释他们的逻辑。

就这一点而言，软键盘设计非常糟糕，因为迄今为止，我测试过的每个用户都认为键盘中的大蓝色按钮必须是将你带到下一个表单字段的按钮，然后在最后一个表单字段上让您提交表单。

iOS在这方面甚至更糟糕，因为他们在每个表单字段中提供了一个“Go”按钮，并且没有通过制表符在字段之间移动的方法。苹果喜欢让计算机简单易用，这很好，但有时假设人们喜欢简单可能导致假设人们都是白痴。

对不起，我发泄了。我确实有一些建设性的意见：

如果您的最后一个表单字段恰好是type=number，那么有一个微小的 hack 可以在Android和iOS上工作：在具有 onfocus="$('#thisForm').submit();" 的不可见文本输入中添加表单。在Android中，此字段将会短暂地在屏幕上闪现：在iOS上不会。为了让Android的情况更加可接受，您可以设置文本输入的值，例如“关闭此表单”，或者将其宽度设置为0，这将导致表单字段的宽度不是完全为0，但仍然非常小。

可怕的hack，但嘿，把责任推给谷歌和苹果的UI人员吧。

- Wytze

---

或者你可以使用position:absolute; left:-9999px;之类的方式将输入框定位到屏幕外。 - Ivy

iOS键盘有“下一个”和“上一个”按钮，它们显示为位于键盘左上角的上下箭头。 - darkbaby123

很好的回答和发泄，它很好地捕捉了我的感受。不过我对这个 hack 有一个问题：如果用户按 Tab 键，表单是否会在桌面浏览器上提交？ - btx9000

我不得不使用Ivy的建议将元素定位到屏幕外，不幸的是，正确隐藏输入意味着您无法切换到它。 - Adam Goodwin

这种行为有变化吗？在最新的Webview更新后，我的应用程序不再显示数字输入的“下一步”按钮。它总是显示“前往”按钮。 - brunobastosg

Answer 2

Android浏览器在输入字段中始终显示“Go”，因为Web上的某些表单（尤其是搜索框）没有提交按钮，只能通过按Enter键（Go相当于Enter）来激活。

相反，某些Android版本将在键盘右下角显示一个标签键，以便在表单字段之间导航。

我认为您无法防止这两种行为。

两个可能的解决方法：

1. 使用JavaScript忽略登录表单的提交，直到两个输入都不为空：

   <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. 最干净的解决方案是使用新的HTML5 required属性将两个输入都设置为必填项，但是安卓浏览器目前还不支持该属性。然而，一个好的方法是使用JavaScript备选方案来补充这个必填属性，例如CSSKarma所描述的方法。

- John Mellor

Answer 3

这是一个与Chromium有关的问题，您可以通过以下链接查看: https://bugs.chromium.org/p/chromium/issues/detail?id=410785 以下是针对Android的解决方法，将用户输入中的“enter”更改为“tab”，以便切换到密码字段（而不会提交表单）： 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>

编辑：注意，Windows Phone也将Android放入UA中，因此需要测试适用于Windows Phone（和Android Firefox）的内容。

- robocat

Answer 4

我遇到了这个问题，后来发现忘记在所有内容外围包裹 <form> 元素。这样做之后，问题就得到了解决。

- TomTheBert

Answer 5

请查看在Phonegap中将软键盘上的Go按钮替换为Next。

如需快速导航，请参见此plunker。 要查看完整代码，请

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

注意：如果使用jQuery的版本高于1.9，不要忘记将.live()方法替换为.on()方法。

- vinesh

---

非常好的答案。运行得像魔术一样顺畅。 - Janning Vygen

Answer 6

如果您希望按钮始终显示为“前往”，请使用enterKeyHint="Go"。

请参阅此答案： https://dev59.com/m2Ag5IYBdhLWcg3wOo79#71593469

- Anas

---

太棒了！在此处查看支持矩阵和文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint - Mikko Rantalainen

Answer 7

你可以使用纯JavaScript将ENTER键转换为输入元素以聚焦到下一个输入框，这不仅在移动浏览器中有用，在桌面浏览器中也很有用。你可以将其优化为textarea和select。

function keyControls(e) {

    // [enter] on inputs tranformed into focus next input.
    // Sending events to inputs is security forbidden.
    // We find the next element and focus() it.
    //    optionally restrict to certain user agens: && /Android/.test(navigator.userAgent)
    if (e.key === "Enter") {
        var el = document.activeElement;
        if (el.tagName == "INPUT" || el.tagName == "SELECT") {

            e.preventDefault();
            var nextEl = null;    
            var found = false;
            for (var i = 0, element; element = el.form.elements[i++];) {
                if (element.type !== "hidden" && element.type !== "fieldset" ) {
                    if (found) {
                        nextEl = element;
                        console.log("found next    element", element.name, " at ", i);
                        break;
                    }
                    if (el === element) {
                        console.log("found current element", element.name, " at ", i);
                        found = true;
                    }
                    // console.log("iterating form elements", element.name, " to ", i);
                } else {
                    // console.log("iterating form elements - skipping ", element.name, " - ", i);
                }
            }
            if (nextEl && nextEl.focus) nextEl.focus();


            if (nextEl) {
                console.log("key listener ENTER - transformed into TAB:", el.tagName, el.name, nextEl.tagName, nextEl.name );
            } else {
                console.log("key listener ENTER - transformed into TAB:", el.tagName, el.name, " next element not found" );
            }


        } else {
            console.log("key listener ENTER on tagname:", el.tagName, el.name );
        }
    }

}

window.onload = function () {
    document.addEventListener("keydown", keyControls, false);
    console.log("key listener registered");                
};

- Peter Buchmann

Answer 8

为了避免用户混淆，请让“GO”按钮仅作为回车键的功能。

为此，请使用表单标签，但为了避免提交不完整的内容，请在提交按钮上使用禁用属性。

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

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

});

现在为了避免页面重新加载，请不要在表单标签中使用action或onsubmit属性，而是使用

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

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

callOnSubmitFunction();
return false;
}
);

在这里使用return false很重要，以避免页面重新加载。

除了Chrome浏览器外，Firefox和默认的Android浏览器显示上一页和下一页按钮，这些按钮将作为选项卡按钮工作，因此请在表单输入元素上使用适当的tabindex属性。

- Shishir Arora

Answer 9

我们无法阻止这种默认行为，因为目前HTML中没有可用的标签。因此，默认情况下会出现“Go”按钮。以下链接列出了可用的输入类型标签：http://www.w3schools.com/tags/att_input_type.asp

- Vikasdeep Singh

---

“Go”按钮的出现似乎完全是随意的。如果输入类型为“文本”，则始终显示“Go”按钮，如果输入类型为“数字”，则始终显示“下一步”。个人认为这种行为是一个错误，由于某种未知原因从未得到修复 - 可能是因为 Google 害怕改变现状，或者因为 Google 认为这不重要而不愿在 AOSP 浏览器上投入工程努力来修复它。 Chrome 在 Android 上似乎总是显示“下一步”，而不是“Go”，如果表单包含多个文本输入。 - Mikko Rantalainen

@MikkoRantalainen，这不是Google的错误，或者我们可以说HTML应该添加此功能。在阅读了您的评论后，我在Nexus5 Chrome浏览器上进行了验证。行为是相同的，即没有出现下一个按钮。我尝试从Chrome登录Facebook，当我输入用户名时，没有“下一步”选项出现。正如我所提到的，这个功能应该被添加到HTML中，因为这种行为在桌面上也是相同的。您无法使用“箭头键”进入下一个编辑字段，但Tab键可以工作，因为type =“tab”可用。 - Vikasdeep Singh

是的，我之前对Chrome的信息是错误的（我使用了本地化键盘，并且猜错了哪个本地化表示“Go”）。在这种情况下，Chrome似乎也显示Go按钮。我仍然认为HTML已经具备了这种情况所需的所有功能。例如，它有tabindex（http://w3c.github.io/html-reference/global-attributes.html#common.attrs.tabindex），应该足以提示浏览器，在提交按钮之前还有更多表单项需要填写。然而，实际的浏览器实现并不足以考虑这些属性。 - Mikko Rantalainen

我认为，如果浏览器在所有表单字段中显示“下一步”，除非下一个表单元素是提交按钮，否则浏览器就可以很好地完成工作，那么“前往”按钮也可以使用。即使在这种情况下，我也更喜欢只关注提交按钮，并要求我确认实际的表单提交。 - Mikko Rantalainen

@mikko-rantalainen，Android团队似乎已经编写了处理此问题的代码https://code.google.com/p/chromium/issues/detail?id=410785#c32，尽管我怀疑他们是否会解决这个问题。 - robocat