假设您在HTML表单中创建了一个向导。一个按钮后退,一个按钮前进。因为当您按Enter键时,返回按钮首先出现在标记中,它将使用该按钮提交表单。

例子:

< >形式 <!—将光标移至该字段,按“Enter”。—> <input type="text" name="field1" /> <!这是提交的按钮——> <input type="submit" name="prev" value="Previous Page" /> <!——但这是我想提交的按钮——> <input type="submit" name="next" value=" next Page" /> > < /形式

我想要确定当用户按Enter键时使用哪个按钮提交表单。这样,当您按下Enter键时,向导将移动到下一页,而不是上一页。你必须使用tabindex来做这个吗?


当前回答

要做到这一点,只需改变制表符顺序即可。保持简单。

另一个简单的选项是将返回按钮放在HTML代码中的提交按钮之后,但将其浮动到左侧,以便它在页面上出现在提交按钮之前。

其他回答

给你的提交按钮设置相同的名称,就像这样:

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

当用户按下Enter并将请求发送到服务器时,您可以在服务器端代码中检查submitButton的值,该代码包含一组表单名称/值对。例如,在ASP Classic中:

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for the previous page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for the next page
End If

参考:在一个表单上使用多个提交按钮

<input type="submit" name="prev" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page"> 

保持所有提交按钮的名称相同:“prev”。

唯一的区别是具有唯一值的value属性。在创建脚本时,这些惟一的值将帮助我们确定按下了哪个提交按钮。

并编写以下代码:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

将之前的按钮类型更改为这样的按钮:

<input type="button" name="prev" value="Previous Page" />

现在Next按钮将是默认的,另外你也可以添加默认属性,这样你的浏览器就会高亮显示它:

<input type="submit" name="next" value="Next Page" default />

在大多数浏览器中,无需JavaScript或CSS即可工作:

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

Firefox, Opera, Safari和谷歌Chrome浏览器都可以使用。一如既往,ie浏览器是问题所在。

当JavaScript被打开时,这个版本可以工作:

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

所以这个解决方案的缺陷是:

如果您使用关闭JavaScript的Internet Explorer,“上一页”将无法工作。

请注意,后退按钮仍然有效!

从https://html.spec.whatwg.org/multipage/forms.html implicit-submission

表单元素的默认按钮是树中的第一个提交按钮 它的表单所有者是该表单元素。 如果用户代理支持让用户隐式提交表单 (例如,在某些平台上,在输入文本时按下“enter”键 字段被隐式聚焦提交表单)…

将下一个输入设置为type="submit",并将前一个输入更改为type="button",应该会得到所需的默认行为。

<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

   <input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>