假设您在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或类似的东西来做一些上/下的事情，另一种选择是使用旋转木马来模拟不同的页面。 这样做:
你不需要多个按钮，输入或提交来做上一个/下一个事情，你只有一个输入类型="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>
其他回答
将之前的按钮类型更改为这样的按钮:
<input type="button" name="prev" value="Previous Page" />
现在Next按钮将是默认的，另外你也可以添加默认属性，这样你的浏览器就会高亮显示它:
<input type="submit" name="next" value="Next Page" default />
给你的提交按钮设置相同的名称，就像这样:
<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
参考:在一个表单上使用多个提交按钮
在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>
当然，这是否可行取决于您的文档结构，但我发现伸缩项比浮动元素更容易控制。
当用鼠标点击按钮时(最好是通过触摸)，它会记录X,Y坐标。当表单调用它时，情况并非如此，这些值通常为零。
所以你可以这样做:
function(e) {
const isArtificial = e.screenX === 0 && e.screenY === 0
&& e.x === 0 && e.y === 0
&& e.clientX === 0 && e.clientY === 0;
if (isArtificial) {
return; // DO NOTHING
} else {
// OPTIONAL: Don't submit the form when clicked
// e.preventDefault();
// e.stopPropagation();
}
// ...Natural code goes here
}
有时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>
