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

新手上路,请多包涵

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

原文由 Mikko Rantalainen 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 445
2 个回答

如果您想观看,这是 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)上进行测试。

原文由 robocat 发布,翻译遵循 CC BY-SA 3.0 许可协议

要添加到 John 的答案中,Android 总是将 ‘Go’ 添加到文本输入 _并始终将 ‘Next’ 添加到数字输入_。我很想听听负责此选择的人解释他们的逻辑。

软键盘设计在这方面很糟糕,因为到目前为止我测试过的每个用户都认为键盘上的蓝色大按钮一定是带你到下一个表单域的按钮,然后在最后一个表单域让你提交表格。

iOS 在这方面更糟,因为它们为每个表单字段提供了一个“开始”按钮,并且无法在各个字段之间切换。 Apple 喜欢让计算机对人们来说简单是件好事,但有时假设人们喜欢它简单可能会变成假设人们都是白痴。

对不起,咆哮。我确实有一些建设性的建议:

如果您的最后一个表单字段恰好是 type=number,那么有一个小技巧可以在 Android 和 iOS 上使用:使用 onfocus="$('#thisForm').submit();" 向表单添加一个不可见的文本输入。在 Android 中,此字段会短暂地闪现:在 iOS 中则不会。为了使Android的情况更可口,您可以为文本输入设置一个值,例如“关闭此表单”,或者您可以将其宽度设置为0,这将导致表单字段宽度不完全为0但仍然很小.

可怕的黑客攻击,但是,嘿,把它归咎于谷歌和苹果的 UI 人员。

原文由 Wytze 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题