我有一个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默认浏览器。
至少在以下配置中可以看到问题：
答案 0 :(得分：50)
为了添加John的答案，Android总是将“Go”添加到文本输入，并始终将“Next”添加到数字输入。我很想听到负责这个选择的人解释他们的逻辑。
软键盘设计在这方面很糟糕，因为到目前为止我测试过的每个用户都认为键盘上的大蓝色按钮必须是将你带到下一个表单字段的按钮，然后是最后一个表单字段允许您提交表单。
iOS在这方面更糟糕，因为它们提供了每个表单字段的“开始”按钮，无法在字段中进行选项卡。很高兴Apple喜欢让人们熟悉电脑，但有时候假设人们喜欢这样简单可以假装人们都是白痴。
对此咆哮感到抱歉。我确实有一些有建设性的东西：
如果您的上一个表单字段恰好是type = number，那么有一个小小的hack可以在Android和iOS上运行：使用onfocus =“$（'＃thisForm'）向表单添加一个不可见的文本输入。提交（）;”。在Android中，这个字段会暂时闪现：在iOS中它不会。为了使Android情况更加可口，你可以为文本输入设置一个值，如“关闭此表单”，或者你可以将其宽度设置为0，这将导致表单字段不是很宽，但仍然很小
可怕的黑客，但是嘿，把它归咎于Google和Apple的用户界面。
答案 1 :(得分：22)
Android浏览器始终显示Go for输入字段，因为网络上的某些表单（尤其是搜索框）没有提交按钮，只能按Enter键激活（Go等效于Enter）。
相反，某些Android版本会在键盘右下方显示一个标签键，以方便在表单字段之间导航。
我认为你不能阻止这些行为。
两种可能的解决方法：
使用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。
答案 2 :(得分：6)
如果您想观看，这是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）上运行的测试。
答案 3 :(得分：5)
请参阅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>
注意：如果使用的jquery版本高于1.9，请不要忘记将.live() jquery方法替换为.on()。
答案 4 :(得分：4)
我遇到了这个问题，然后我意识到我忘记了将所有内容包装在<form>元素中。修复了所有问题。
答案 5 :(得分：1)
您可以使用纯JavaScript通常将ENTER键更改为输入元素，以使下一个输入聚焦。
它不仅在移动浏览器中有用，而且在桌面浏览器中也有用。
您可以针对文本区域进行优化，然后选择。
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");
};
答案 6 :(得分：0)
为避免用户混淆，让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;
}
);
返回false非常重要，以避免页面重新加载。
除了chrome之外，firefox和默认的android浏览器显示了一个prev和next按钮，它们将作为tab按钮使用，所以在表单输入元素上使用正确的tabindex atrributes。
答案 7 :(得分：0)
我们无法阻止此默认行为，因为截至目前，HTML中没有输入type="next"标记。因此默认情况下会出现“开始”按钮。以下链接包含可用输入类型标记列表：http://www.w3schools.com/tags/att_input_type.asp