我有一个向导样式的HTML表单,其中包含用于“后退/下一步/取消”操作的提交按钮行(按此顺序)。该表单还可以包含不同数量的输入字段,例如文本字段,单选按钮,复选框,下拉菜单(选择标签)和文本区域。客户要求“下一步”按钮是默认操作,因此,如果用户在文本字段中键入并按Enter键,则应提交表单,就像他们单击“下一步”按钮一样。
问题在于,在这种情况下,浏览器(至少是IE,这是我们99%的客户使用的浏览器)使用表单中声明的第一个按钮提交表单,您可以从上面的列表中看到“返回” ,而不是所需的“下一步”。
我读到的一个解决方法是以相反的顺序声明“后退”和“下一步”按钮(即先“下一步”),然后使用CSS正确显示它们,如下所示:
<html>
<head>
<style type="text/css">
.formSubmitButtons {
direction: rtl;
float: left;
}
.formSubmitButtons input {
direction: ltr;
float: none;
}
</style>
</head>
<body>
<form action="blah" method="POST" enctype="application/x-www-form-urlencoded">
<div class="formSubmitButtons">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnBack" value="Back">
</div>
<input type="submit" name="btnCancel" value="Cancel">
<br/>Some text fields go here...
</form>
</body>
</html>
这在Firefox和IE中都提供了所需的行为和按钮顺序,但是“取消”按钮相对于其他按钮的间距不一致。在IE6中看起来不错,但是在Firefox 3.0.5中,“取消”按钮与“下一步”按钮卡住了。
有谁知道我需要编织什么CSS魔术才能使这三个按钮在两个浏览器中均匀分布?
(通过排序“下一步” /“上一步” /“取消”按钮来避免出现此问题)
(还要感谢所有建议基于JavaScript的解决方案的人,但并非我们所有的客户都允许使用JS,因此它必须是直接的HTML和/或CSS解决方案)
这是我最终做的很好的结果(基于Cletus的建议):
<!--
<input type="submit" name="btnNext" style="position: absolute; left: -9999px" tabindex="-1">
<input type="submit" name="btnBack" value="Back">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnCancel" value="Cancel">
-->
(忽略包装的注释标签,它们只是为了您可以看到HTML)
最佳答案
您是否考虑过使用this trick?基本上,您只需要先显示一个隐藏按钮即可执行所需的操作。