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


当前回答

当我第一次遇到这种情况时,我想出了一个onclick()/JavaScript hack,当选择不是prev/next时,我仍然喜欢它的简单性。它是这样的:

@model myApp.Models.myModel

<script type="text/javascript">
    function doOperation(op) {
        document.getElementById("OperationId").innerText = op;
        // you could also use Ajax to reference the element.
    }
</script>

<form>
  <input type="text" id = "TextFieldId" name="TextField" value="" />
  <input type="hidden" id="OperationId" name="Operation" value="" />
  <input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
  <input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>

当单击任何一个提交按钮时,它将所需的操作存储在一个隐藏字段中(该字段是包含在与表单关联的模型中的字符串字段),并将表单提交给控制器,由控制器进行所有决定。在控制器中,你只需写:

// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
     // Do read logic
}
else if (myModel.Operation == "Write")
{
     // Do write logic
}
else
{
     // Do error logic
}

您还可以使用数值操作代码来避免字符串解析,但是除非使用枚举,否则代码可读性较差、可修改性较差、自文档性较差,解析也很简单。

其他回答

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

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

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

从https://html.spec.whatwg.org/multipage/forms.html implicit-submission

表单元素的默认按钮是树中的第一个提交按钮 它的表单所有者是该表单元素。 如果用户代理支持让用户隐式提交表单 (例如,在某些平台上,在输入文本时按下“enter”键 字段被隐式聚焦提交表单)…

将下一个输入设置为type="submit",并将前一个输入更改为type="button",应该会得到所需的默认行为。

<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

   <input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

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

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

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

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

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