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


当前回答

问题

一个表单可以有几个提交按钮。 当在任何输入中按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 -->

这里有一支完整的码笔。

其他回答

可以使用Tabindex来解决这个问题。此外,改变按钮的顺序将是实现这一目标的更有效方法。

更改按钮的顺序,并添加浮动值,将它们分配到您希望在HTML视图中显示的所需位置。

<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

在CSS float方法上,一个可能更现代的方法是在flex项目上使用带有order属性的flexbox解决方案。它可能是这样的:

<div style="display: flex">
  <input type="submit" name="next" value="Next Page" style="order: 1" />
  <input type="submit" name="prev" value="Previous Page" style="order: 0" />
</div>

当然,这是否可行取决于您的文档结构,但我发现伸缩项比浮动元素更容易控制。

与其纠结于多次提交,JavaScript或类似的东西来做一些上/下的事情,另一种选择是使用旋转木马来模拟不同的页面。 这样做:

你不需要多个按钮,输入或提交来做上一个/下一个事情,你只有一个输入类型="submit"在只有一个形式。 整个表单中的值一直存在,直到表单提交为止。 用户可以切换到任何上一页和下一页来完美地修改值。

使用Bootstrap 5.0.0的示例:

<div id="carousel" class="carousel slide" data-ride="carousel">
    <form action="index.php" method="post" class="carousel-inner">
        <div class="carousel-item active">
            <input type="text" name="lastname" placeholder="Lastname"/>
        </div>
        <div class="carousel-item">
            <input type="text" name="firstname" placeholder="Firstname"/>
        </div>
        <div class="carousel-item">
            <input type="submit" name="submit" value="Submit"/>
        </div>
    </form>
    <a class="btn-secondary" href="#carousel" role="button" data-slide="prev">Previous page</a>
    <a class="btn-primary" href="#carousel" role="button" data-slide="next">Next page</a>
</div>

有时palotasb提供的解决方案是不够的。有一些用例,例如“Filter”提交按钮被放置在“Next和Previous”按钮之上。我找到了一个解决办法:复制提交按钮,这需要作为默认提交按钮在一个隐藏的div,并把它放在任何其他提交按钮上面的表单。

从技术上讲,当按下Enter时,它将由不同的按钮提交,而不是单击可见的Next按钮。但是由于名称和值是相同的,所以结果没有区别。

<html> <head> <style> div.defaultsubmitbutton { display: none; } </style> </head> <body> <form action="action" method="get"> <div class="defaultsubmitbutton"> <input type="submit" name="next" value="Next"> </div> <p><input type="text" name="filter"><input type="submit" value="Filter"></p> <p>Filtered results</p> <input type="radio" name="choice" value="1">Filtered result 1 <input type="radio" name="choice" value="2">Filtered result 2 <input type="radio" name="choice" value="3">Filtered result 3 <div> <input type="submit" name="prev" value="Prev"> <input type="submit" name="next" value="Next"> </div> </form> </body> </html>