假设您在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来做这个吗?


当前回答

使用JavaScript(这里是jQuery),您可以在提交表单之前禁用prev按钮。

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

其他回答

我只是让按钮向右浮动。

这样,Prev按钮在Next按钮的左边,但在HTML结构中Next在前面:

.f { 浮:正确; } .clr { 明确:; } <form action="action" method="get"> <input type="text" name="abc"> < div id = "按钮" > <input type="submit" class="f" name="next" value=" next" > <input type="submit" class="f" name="prev" value=" prev" > < div class = " clr " > < / div > < !这个div可以防止后面的元素随按钮一起浮动。保持他们“内部”div#按钮—> < / div > > < /形式

优于其他建议的优点:没有JavaScript代码,可访问,两个按钮都保持type="submit"。

纯HTML无法做到这一点。要做到这一点,必须依赖JavaScript。

但是,如果在HTML页面上放置两个表单,则可以做到这一点。

Form1将拥有前面的按钮。

Form2将有任何用户输入+下一个按钮。

当用户在Form2中按下Enter键时,Next提交按钮将触发。

<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

问题

一个表单可以有几个提交按钮。 当在任何输入中按return时,浏览器将使用第一个提交按钮。 然而,有时我们想使用不同的/稍后按钮作为默认值。

选项

首先添加一个具有相同操作的隐藏提交按钮(☹️副本) 首先在表单中放入所需的提交按钮,然后通过CSS将其移动到正确的位置(☹️可能不可行,可能导致繁琐的样式) 通过JavaScript改变所有表单输入中的返回键的处理(☹️需要JavaScript)

没有一个选项是理想的,所以我们选3。因为大多数浏览器都启用了JavaScript。

选择解决方案

// example implementation document.addEventListener('DOMContentLoaded', (ev) => { for (const defaultSubmitInput of document.querySelectorAll('[data-default-submit]')) { for (const formInput of defaultSubmitInput.form.querySelectorAll('input')) { if (formInput.dataset.ignoreDefaultSubmit != undefined) { continue; } formInput.addEventListener('keypress', (ev) => { if (ev.keyCode == 13) { ev.preventDefault(); defaultSubmitInput.click(); } }) } } }); <!-- example markup --> <form action="https://postman-echo.com/get" method="get"> <input type="text" name="field1"> <input type="submit" name="submit" value="other action"> <input type="submit" name="submit" value="default action" data-default-submit> <!-- this button will be used on return --> </form>

能够从某些输入中删除增强可能是有用的。这可以通过以下方法实现:

<input type="text" name="field2" data-ignore-default-submit> <!-- uses browser standard behaviour -->

这里有一支完整的码笔。

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

<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

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