假设您在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无法做到这一点。要做到这一点,必须依赖JavaScript。

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

Form1将拥有前面的按钮。

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

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

其他回答

在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>

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

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

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

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

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

有时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>

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

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

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

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