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

我有一个HTMLlogin表单，包含以下元素（按此顺序）：

• input type=text （用户名称input）
• input type=password （密码）
• input type=submit （loginbutton）

为什么当焦点在text input时，Android浏览器在软键盘上显示“Go”button而不是“Next”button？ 这导致用户很难轻易login，因为在input用户名后，用户按下键盘右下angular的button（通常是正确的动作），表单将被提交一个空的密码，这显然是不会工作的。 [这种行为是有道理的，如果我的浏览器被设置为记住密码，密码pipe理器将能够填写密码。 但是，这里不是这种情况，因为您可以在下面testing自己。]

我想要inputtypes的文本有“下一步”button和inputtypes的密码（提交之前的最后一个input）有“去”button。

有问题的forms的一个例子是在https://peda.net/:login （这个表单包含代码来检测input的“Enter”键，并且防止提交表单，除非最后可见的表单input被聚焦）。

你知道这个问题的真正解决吗？ 我知道，如果我正在实现原生应用程序，我会使用android:imeOptions="actionNext" （请参阅如何将Android软键盘“Go”button更改为“Next” ）。 但是，在这种情况下，它是一个HTML表单和Android默认浏览器。

问题至less在以下configuration中可见：

• 在Android 2.3.4上运行的“Browser”系统应用程序（Cyanogenmod 7）
• 在Android 4.2.2上运行的“Browser”系统应用程序（Cyanogenmod 10.1）
• 在Android 4.3.1上运行的“Browser”系统应用程序（Cyanogenmod 10.2 M1）
• 在Android 4.4.2上运行的“Browser”系统应用程序（AOSP Browser）（Cyanogenmod 11.0 M3）
• 在Android 5.5.1（Cyanogenmod 12.1）上运行的“浏览器”系统应用程序（AOSP Browser）[有一个箭头图标而不是单词“Go”]
• 在Android 6.0.1上运行的“浏览器”系统应用程序（AOSP Browser）（Cyanogenmod 13.0）[有一个箭头图标而不是单词“Go”]

Answer 1

Android浏览器总是在input字段中显示Go，因为Web上的某些表单（特别是search框）没有提交button，只能通过按Enter（Go等效于Enter）来激活。

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

我不认为你可以防止这些行为。

两种可能的解决方法：

1. 使用JavaScript忽略login表单的提交，直到两个input都是非空的：

    <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. 最简洁的解决scheme将是使用新的HTML5 必需属性来设置所需的input， 但 Android浏览器还不支持。 然而，一个好的方法是用CSSKarma描述的JavaScript回退来补充所需的属性。

Answer 2

为了添加John的答案，Android总是将“Go”添加到文本input， 并始终将“Next”添加到数字input 。 我很乐意听到这个select负责人解释他们的逻辑。

软键盘的devise在这方面只是很糟糕，因为到目前为止，我testing过的每个用户都认为键盘上的蓝色大button必须是将您带到下一个表单字段的button，然后在最后一个表单字段中让您提交表格。

iOS在这方面更糟糕，因为他们提供了每个表单字段的“Go”button，无法通过字段选项卡。 苹果喜欢让电脑变得简单，但是有时候假设简单的人可以掩饰成假设的人都是白痴。

对不起，这个咆哮。 我有一些build设性的东西可以提供：

如果你的最后一个表单字段恰好是type = number，那么在Android和iOS上就会有一个小小的黑客攻击：在onfocus =“$（'＃thisForm'）”中添加一个不可见的文本input。 ）;”。 在Android中，这个字段将会短暂地闪烁到视图中：在iOS中，它不会。 为了让Android情况变得更加美观，你可以为文本input设置一个值，例如“closures这个表单”，或者你可以将其宽度设置为0，这将导致表单字段的宽度不是很宽，但仍然很小。

可怕的黑客，但嘿，怪在谷歌和苹果的用户界面上。

Answer 3

请参阅Phonegap中的下一步使用软键盘上的replaceGobutton 。

为了快速导航，请参阅这个闯关者 。 遵循完整的代码

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

注意：不要忘记用.on()replacejquery的.live()方法，如果使用新版本的jquery比1.9。

Answer 4

这是铬的问题，如果你想看： https ： //bugs.chromium.org/p/chromium/issues/detail？id = 410785

这是Android的一种解决方法，它改变用户input中的“input”，以便它“密码”到密码字段（并且不提交表单）：

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）上运行的testing。

Answer 5

我们无法阻止这种默认行为，因为截至目前，HTML中没有input type="next"标签。 所以默认情况下出现“Go”button。 下面的链接有可用的inputtypes标签列表： http : //www.w3schools.com/tags/att_input_type.asp

Answer 6

为了避免混淆用户让GObuttonfunction只作为inputbutton。

为此使用表单标签，但要避免不完整的提交使用提交button上的禁用属性。

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

在这里返回false是很重要的，以避免页面重新加载。

除了Chrome以外，Firefox和默认的Android浏览器都显示一个prev和nextbutton，它们将作为tabbutton使用，所以在form input元素上使用适当的tabindex atrributes。