我的表单有三个提交按钮,如下所示:
<input type="submit" name="COMMAND" value="‹ Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset" name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next ›">
<input type="button" name="NOTHING" value="Skip ›" onclick="location = 'yada-yada.asp';">
按钮行是提交,重置和javascript按钮的混合。按钮的顺序可能会发生变化,但无论如何,保存按钮仍保留在prev按钮和下一个按钮之间。这里的问题是当用户点击“enter”提交表单时,post变量“COMMAND”包含“Prev”;正常,因为这是表单上的第一个提交按钮。但是,当用户通过输入按钮提交表单时,我希望触发“下一步”按钮。有点像将其设置为默认提交按钮,即使之前还有其他按钮。
答案 0 :(得分:80)
第一个按钮始终是默认按钮;它无法改变。虽然您可以尝试使用JavaScript进行修复,但在没有脚本的情况下,表单会在浏览器中出现意外行为,并且需要考虑一些可用性/可访问性的极端情况。例如,由Zoran链接的代码将在<input type="button">
中意外地在Enter press上提交表单,这通常不会发生,并且不会捕获IE提交表单以进入其他非表单中的字段内容。因此,如果您使用该脚本单击表单中的<p>
中的某些文本并按Enter键,则会提交错误的按钮...如果在该示例中给出了真正的默认按钮是'删除,则特别危险“!
我的建议是忘记使用脚本黑客重新分配默认值。继续使用浏览器的流程,然后首先放置默认按钮。如果您无法破解布局以获得所需的屏幕顺序,那么您可以通过在源中首先使用虚拟隐形按钮来实现,其名称/值与您想要默认的按钮相同:
<input type="submit" class="defaultsink" name="COMMAND" value="Save" />
.defaultsink {
position: absolute; left: -100%;
}
(注意:定位用于将按钮推离屏幕,因为display: none
和visibility: hidden
对按钮是否为默认按钮以及是否已提交按钮具有浏览器变量副作用。)< / p>
答案 1 :(得分:73)
我的建议是不要对抗这种行为。您可以使用浮动有效地更改订单。例如:
<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>
使用:
#buttons { overflow: hidden; }
#buttons input { float: right; }
将有效地颠倒顺序,因此“下一步”按钮将是通过按Enter键触发的值。
这种技术将涵盖许多情况,而不必使用更多hacky Javascript方法。
答案 2 :(得分:35)
Quick'n'dirty,你可以创建一个隐藏的提交按钮副本,当按下回车键时应该使用它。
input.hidden {
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />
如果某人现在点击您的表单,则(隐藏的)下一步按钮将用作提交者。
在IE9,Firefox,Chrome和Opera上进行测试
答案 3 :(得分:32)
将type=submit
设置为您想要默认的按钮,将type=button
设置为其他按钮。现在,在下面的表单中,您可以在任何输入字段中按Enter键,Render
按钮将起作用(尽管它是表单中的第二个按钮)。
示例:
<button id='close_button' class='btn btn-success'
type=button>
<span class='glyphicon glyphicon-edit'> </span> Edit program
</button>
<button id='render_button' class='btn btn-primary'
type=submit> <!-- Here we use SUBMIT, not BUTTON -->
<span class='glyphicon glyphicon-send'> </span> Render
</button>
在FF24和Chrome 35中测试。
答案 4 :(得分:28)
如果您正在使用jQuery,那么here发表评论的解决方案非常灵活:
$(function(){
$('form').each(function () {
var thisform = $(this);
thisform.prepend(thisform.find('button.default').clone().css({
position: 'absolute',
left: '-999px',
top: '-999px',
height: 0,
width: 0
}));
});
});
只需将class="default"
添加到您想要成为默认设置的按钮即可。它将该按钮的隐藏副本放在表单的开头。
答案 5 :(得分:5)
我复活了这个,因为我正在研究一种非JavaScript的方式来做到这一点。我没有进入关键处理程序,CSS定位的东西导致标签排序中断,因为CSS重新定位并没有改变标签顺序。
我的解决方案基于https://stackoverflow.com/a/9491141的回复。
解决方案来源如下。 tabindex用于纠正隐藏按钮的选项卡行为,以及隐藏的咏叹调,以避免屏幕阅读器读取按钮/辅助设备识别。
<form method="post" action="">
<button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
<div class="form-group">
<label for="test-input">Focus into this input: </label>
<input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
</div>
DOM中的第一个按钮 DOM中的第二个按钮 DOM中的第3个按钮
此解决方案的基本CSS:
.default-button-handler {
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}
答案 6 :(得分:1)
另一种解决方案,使用jQuery:
$(document).ready(function() {
$("input").keypress(function(e) {
if (e.which == 13) {
$('#submit').click();
return false;
}
return true;
});
});
这应该适用于以下表格,制作&#34;更新&#34;默认操作:
<form name="f" method="post" action="/action">
<input type="text" name="text1" />
<input type="submit" name="button2" value="Delete" />
<input type="submit" name="button1" id="submit" value="Update" />
</form>
以及:
<form name="f" method="post" action="/action">
<input type="text" name="text1" />
<button type="submit" name="button2">Delete</button>
<button type="submit" name="button1" id="submit">Update</button>
</form>
仅当表单上的输入字段具有焦点时,才会捕获Enter键。
答案 7 :(得分:0)
您不应该使用相同名称的按钮。这是糟糕的语义。相反,您应该修改后端以查找正在设置的不同名称值:
<input type="submit" name="COMMAND_PREV" value="‹ Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset" name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next ›">
<input type="button" name="NOTHING" value="Skip ›" onclick="window.location = 'yada-yada.asp';">
由于我不知道你在后端使用的语言,我会给你一些假代码:
if (input name COMMAND_PREV is set) {
} else if (input name COMMAND_SAVE is set) {
} else if (input name COMMENT_NEXT is set) {
}
答案 8 :(得分:-1)
bobince的解决方案有一个缺点,即创建一个按钮,可以 Tab -d over,但是否则无法使用。这可能会给键盘用户造成混淆。
另一种解决方案是使用鲜为人知的form
属性:
<form>
<input name="data" value="Form data here">
<input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
<input type="submit" name="submit" value="Submit">
</form>
<form id="form2"></form>
这是standard HTML,但遗憾的是,Internet Explorer不支持。