HTML:为什么Android浏览器在键盘中显示"Go"而不是"Next"？

Question

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

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

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

我想让输入类型文本具有"下一步"按钮和输入类型密码(提交前的最后一个输入)以具有"开始"按钮.

问题表单的一个示例位于https://peda.net/:login(此表单包含用于检测输入的"Enter"键的代码,并阻止提交表单,除非最后一个可见表单输入被聚焦).

你知道这个问题的真正解决方法吗？我知道如果我实现本机应用程序,我会使用android:imeOptions="actionNext"(请参阅如何将Android软键盘"Go"按钮更改为"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在这方面更糟糕,因为它们提供了每个表单字段的"开始"按钮,无法在字段中进行选项卡.苹果公司喜欢让电脑变得简单,这很好,但有时候假设人们喜欢这样简单,可以假装人们都是白痴.

抱歉这个咆哮.我确实有一些建设性的东西:

如果你的最后一个表单字段恰好是type = number,那么有一个小的hack可以在Android和iOS上运行:使用onfocus ="$('#thisForm')在表单中添加一个不可见的文本输入.submit( );".在Android中,这个字段将简要地闪现在视图中:在iOS中它不会.为了使Android情况更加可口,你可以为文本输入设置一个值,如"关闭此表单",或者你可以将其宽度设置为0,这将导致表单字段不是很宽,但仍然很小.

可怕的黑客,但嘿,责怪谷歌和苹果的用户界面.

Answer 2

Android浏览器始终显示Go for输入字段,因为Web上的某些表单(尤其是搜索框)没有提交按钮,只能通过按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 必需属性设置两个输入- 但 Android浏览器尚不支持此功能.然而,一个好的方法是使用CSS回退补充所需的属性,例如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也会放入AndroidUA,因此需要在Windows Phone(和Android Firefox)上运行的测试.

Answer 4

请参阅Phonegap中的Next软键盘上的Replace Go按钮.

如需快速导航,请参阅此弹射器.要遵循完整的代码

<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版本,请不要忘记替换.live()jquery的方法.on().

Answer 5

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