HTML：为什么Android浏览器在键盘上显示“Go”而不是“Next”？

Question

我有一个 HTML 登录表单，其中包含以下元素（按此顺序）：

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

为什么当焦点在text input 时，Android 浏览器在软键盘上显示“开始”按钮而不是“下一步”按钮？这会导致用户很容易登录失败，因为在输入用户名后，用户按下键盘右下角的按钮（通常是正确的操作），表单会以空密码提交，这显然是行不通的. [如果我的浏览器设置为记住密码并且密码管理器能够填写密码，这种行为将是有意义的。但是，这里不是这种情况，您可以在下面测试自己。]

我想让输入类型文本有“下一步”按钮，输入类型密码（提交前的最后一个输入）有“开始”按钮。

https://peda.net/:login 是一个有问题的表单示例（此表单包含用于检测输入的“Enter”键并阻止提交表单的代码，除非最后一个可见表单输入被聚焦）。

您知道此问题的真正解决方法吗？我知道如果我正在实现本机应用程序，我会使用android:imeOptions="actionNext"（请参阅How to change the Android softkey keyboard "Go" button to "Next"）。但是，在这种情况下，它是 HTML 表单和 Android 默认浏览器。

至少通过以下配置可以看到问题：

• “浏览器”系统应用在 Android 2.3.4 (Cyanogenmod 7) 上运行
• “浏览器”系统应用在 Android 4.2.2 (Cyanogenmod 10.1) 上运行
• “浏览器”系统应用在 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”]

Answer 1

为了补充 John 的答案，Android 总是在文本输入中添加“Go”并且总是在数字输入中添加“Next”。我很想听听负责这个选择的人解释他们的逻辑。

软键盘的设计在这方面很糟糕，因为到目前为止我测试过的每个用户都认为键盘上的蓝色大按钮必须是带您进入下一个表单字段然后进入最后一个表单的按钮字段允许您提交表单。

iOS 在这方面更糟糕，因为它们在每个表单字段中都提供了一个“开始”按钮，并且无法通过选项卡浏览这些字段。 Apple 喜欢让计算机对人们来说很简单，这很好，但有时假设人们喜欢它简单会变成假设人们都是白痴。

对那次咆哮感到抱歉。我确实有一些建设性的建议：

如果您的最后一个表单字段恰好是 type=number，那么有一个小技巧可以在 Android 和 iOS 上运行：使用 onfocus="$('#thisForm').submit();" 在表单中添加一个不可见的文本输入。在 Android 中，该字段会短暂闪现：在 iOS 中不会。为了让 Android 的情况更容易接受，你可以为文本输入设置一个值，比如“关闭这个表单”，或者你可以将它的宽度设置为 0，这将导致表单字段的宽度不是 0，但仍然非常小.

骇人听闻的 hack，但是，嘿，归咎于 Google 和 Apple 的 UI 人员。

Answer 2

Android 浏览器总是显示 Go 输入字段，因为网络上的某些表单（尤其是搜索框）没有提交按钮，只能通过按 Enter 激活（Go 相当于 Enter）。

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

我认为你不能阻止这些行为。

两种可能的解决方法：

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 attribute 将两个输入设置为必需 - 但 Android 浏览器尚不支持此功能。然而，一个好的方法是使用 JavaScript 回退来补充所需的属性，例如 described by CSSKarma。

Answer 3

如果您想观看，这是 Chromium 问题：https://bugs.chromium.org/p/chromium/issues/detail?id=410785

以下是一种适用于 Android 的解决方法，它更改用户输入中的“回车”，使其“标签”到密码字段（并且不提交表单）：

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）上进行测试。

Answer 4

见Replace Go button on soft keyboard with Next in Phonegap。

如需快速导航，请参阅此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>

注意：如果使用比 1.9 更新的 jquery 版本，请不要忘记将 jquery 的 .live() 方法替换为 .on()。

Answer 5

我遇到了这个问题，然后我意识到我忘记将所有内容包装在 <form> 元素中。这解决了一切。

Answer 6

您通常可以使用纯 JavaScript 将 ENTER 键更改为输入元素以聚焦下一个输入。

它不仅适用于移动浏览器，也适用于桌面浏览器。

您可以为 textarea 优化它并选择。

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");                
};

Answer 7

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

Answer 8

为避免用户混淆，让 GO 按钮仅用作输入按钮。

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

$("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 浏览器会显示 prev 和 next 按钮，它们将用作选项卡按钮，因此请在表单输入元素上使用适当的 tabindex 属性。