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


当前回答

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

将您想要在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>

其他回答

给你的提交按钮设置相同的名称,就像这样:

<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

参考:在一个表单上使用多个提交按钮

当用鼠标点击按钮时(最好是通过触摸),它会记录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
}

我认为这是一个简单的解决方法。将Previous按钮类型更改为button,并添加一个新的onclick属性,值为jQuery(this).attr('type','submit');

因此,当用户单击Previous按钮时,它的类型将被更改为submit,表单将与Previous按钮一起提交。

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

  <!-- This is the button that will submit -->
  <input type="button" onclick="jQuery(this).attr('type','submit');" name="prev" value="Previous Page" />

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

这是我尝试过的:

你需要确保你给你的按钮不同的名字 编写if语句,在单击任意一个按钮时执行所需的操作。

 

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

    <input type="submit" 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>

在PHP中,

if(isset($_POST['prev']))
{
    header("Location: previous.html");
    die();
}

if(isset($_POST['next']))
{
    header("Location: next.html");
    die();
}

你可以用CSS来做。

首先在标记中放入Next按钮,然后是Prev按钮。

然后使用CSS来定位它们以显示您想要的方式。