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

Posted 2023-02-21

【中文标题】HTML：为啥Android浏览器在键盘上显示“Go”而不是“Next”？

【英文标题】：HTML: Why does Android browser show "Go" instead of "Next" in keyboard?HTML：为什么Android浏览器在键盘上显示“Go”而不是“Next”？

【发布时间】：2011-09-26 13:39:06

【问题描述】：

我有一个 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”]

【问题讨论】：

你试过在输入上使用 tabindex 吗？

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

我想知道这是否是不当行为仍然是最先进的？

在 Android 4.3.1 上运行的 AOSP 浏览器仍然可以看到该问题 - 我已使用最新信息更新了该问题。

在 Android 4.4.2 上的 Chrome 35 中仍然会发生这种情况。这实际上是 Chrome/AOSP/Webkit 错误还是键盘？我们向谁报告错误？奇怪的是，这个令人沮丧的 UX 问题在 3 年多的时间里几乎没有被报道过，尤其是当 ios 做得比这更长时间的时候。

【参考方案1】：

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

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

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

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

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

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

【讨论】：

或者您可以使用 position:absolute; 将输入置于屏幕外。左：-9999px；或类似的东西。

iOS 键盘有“下一个”和“上一个”按钮，它们在键盘左上角显示为上/下箭头。

很好的答案和很好的咆哮，它很好地捕捉到了我自己的感受。不过，我确实对 hack 有一个问题：如果用户按下 Tab 键，表单不会在桌面浏览器上提交吗？

我不得不使用 Ivy 提出的将元素放置在屏幕外的建议，不幸的是，正确隐藏输入意味着您无法使用标签。

这种行为改变了吗？在最新的 webview 更新后，我的应用程序停止显示数字输入的下一步按钮。它总是显示 Go 按钮。

【参考方案2】：

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

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

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

两种可能的解决方法：

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

最简洁的解决方案是使用新的 HTML5 required attribute 将两个输入设置为必需 - 但 Android 浏览器尚不支持此功能。然而，一个好的方法是使用 JavaScript 回退来补充所需的属性，例如 described by CSSKarma。

【参考方案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）上进行测试。

【参考方案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()。

【讨论】：

很好的答案。像魅力一样工作。

【参考方案5】：

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

【参考方案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");                
;

【参考方案7】：

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

【讨论】：

出现的“开始”按钮似乎完全是任意的。如果输入类型是text，它总是显示“开始”按钮，如果输入类型是number，它总是显示“下一步”。我个人认为这种行为是由于某种未知原因而永远无法修复的错误——也许谷歌害怕改变现状，或者谷歌认为这不足以投入工程精力来修复 AOSP 浏览器，因为他们认为每个人都应该使用 Chrome .如果表单包含多个文本输入，Android 上的 Chrome 似乎总是显示“Next”而不是“Go”。

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

是的，我掌握的有关 Chrome 的信息不正确（我使用的是本地化键盘，但猜错了本地化意味着“开始”）。对于这种情况，Chrome 似乎也显示了 Go 按钮。我仍然认为 HTML 已经具备了这种情况下所需的所有功能。例如，它有tabindex (w3c.github.io/html-reference/…) 应该足以提示浏览器在使用提交按钮之前有更多的表单项。但是，实际的浏览器实现质量不足以考虑这些属性。

我认为如果浏览器为所有表单字段显示“下一步”，除非下一个表单元素是提交按钮，那么“开始”按钮就可以了。即使在这种情况下，我宁愿只关注提交按钮并要求我确认实际的表单提交。

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

【参考方案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 属性。