假设您在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');
    }
});

其他回答

如果你在一个页面上有多个活动按钮,你可以这样做:

将您想要在Enter键上触发的第一个按钮标记为表单上的默认按钮。对于第二个按钮,将其关联到键盘上的退格键。Backspace eventcode是8。

$(document).on("keydown", function(event) { if (event.which.toString() == "8") { var findActiveElementsClosestForm = $(document.activeElement).closest("form"); if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) { $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click"); } } }); <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> <form action="action" method="get" defaultbutton="TriggerOnEnter"> <input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" /> <input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" /> </form>

我在试图找到基本相同的问题的答案时遇到了这个问题,只是用ASP。asp.net控件,当我发现ASP按钮有一个叫做UseSubmitBehavior的属性,它允许你设置哪一个进行提交。

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

以防有人在找ASP。NET按钮的方式来做。

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

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

如果默认使用的第一个按钮在各个浏览器中是一致的,那么在源代码中将它们放在正确的位置,然后使用CSS来切换它们的明显位置。

例如,将它们左右浮动以在视觉上切换它们。

如果你真的只是想让它像安装对话框一样工作,只需要关注“Next”按钮OnLoad。

这样,如果用户点击Return,表单就会提交并继续。如果他们想返回,他们可以按Tab键或点击按钮。