281

假设您在 HTML 表单中创建了一个向导。一键后退，一键前进。由于按下后退按钮首先出现在标记中Enter，因此它将使用该按钮提交表单。

例子：

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

  <!-- This is the button that will submit -->
  <input 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>

我想决定当用户按下哪个按钮来提交表单Enter。这样，当您按下时Enter，向导将移动到下一页，而不是上一页。你必须用tabindex它来做这个吗？

4

26 回答 26

150

我只是在做float右边的按钮。

这样Prev按钮就在按钮的左边Next，但Next在 HTML 结构中首先出现：

.f {
  float: right;
}
.clr {
  clear: both;
}
<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

优于其他建议的好处：没有 JavaScript 代码，可访问，并且两个按钮都保留type="submit"。

于 2008-08-28T09:34:40.143 回答
65

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

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

现在Next按钮将是默认按钮，此外，您还可以为其添加default属性，以便您的浏览器将其突出显示，如下所示：

<input type="submit" name="next" value="Next Page" default />
于 2008-08-01T13:14:30.303 回答
61

为您的提交按钮提供相同的名称，如下所示：

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

当用户按下Enter并且请求转到服务器时，您可以检查包含表单对submitButton集合的服务器端代码的值。name/value例如，在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

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

于 2008-08-01T13:10:16.473 回答
31

如果默认情况下使用第一个按钮的事实在浏览器中是一致的，请将它们放在源代码中的正确位置，然后使用 CSS 切换它们的外观位置。

float例如，它们左右切换以在视觉上切换它们。

于 2008-08-02T11:24:57.417 回答
21

有时palotasb 提供的解决方案是不够的。在某些用例中，例如“过滤器”提交按钮放置在“下一个和上一个”等按钮上方。我找到了一个解决方法：复制需要充当隐藏 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>
于 2012-10-26T09:53:08.867 回答
18

纯 HTML 无法做到这一点。你必须依靠 JavaScript 来实现这个技巧。

但是，如果您在 HTML 页面上放置两个表单，则可以这样做。

Form1 将具有上一个按钮。

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

当用户Enter在 Form2 中按下时，会触发 Next submit 按钮。

于 2008-08-26T03:44:54.507 回答
17

我会使用 JavaScript 提交表单。该函数将由表单元素的 OnKeyPress 事件触发，并检测是否Enter选择了键。如果是这种情况，它将提交表单。

这里有两页提供了有关如何执行此操作的技术：1、2。基于这些，这里是一个使用示例（基于here）：

<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) {
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />
于 2008-08-03T13:12:21.007 回答
17

如果您真的只是希望它像安装对话框一样工作，只需将焦点放在“下一步”按钮 OnLoad。

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

于 2008-08-26T03:41:44.673 回答
16

你可以用 CSS 来做到这一点。

将按钮放在标记中，Next首先是按钮，然后是Prev按钮。

然后使用 CSS 将它们定位为您想要的方式。

于 2008-09-16T12:16:05.913 回答
13

这在大多数浏览器中无需 JavaScript 或 CSS 即可工作：

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

Firefox、Opera、Safari 和 Google Chrome 都可以使用。
与往常一样，Internet Explorer 是问题所在。

此版本在 JavaScript 开启时有效：

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

所以这个解决方案的缺陷是：

如果您在关闭 JavaScript 的情况下使用 Internet Explorer，上一页将无法工作。

请注意，后退按钮仍然有效！

于 2008-09-16T11:19:26.970 回答
12

如果您在一页上有多个活动按钮，那么您可以执行以下操作：

将要在Enter按键上触发的第一个按钮标记为表单上的默认按钮。对于第二个按钮，将其Backspace与键盘上的按钮相关联。事件Backspace代码为 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>

于 2014-03-14T14:51:50.723 回答
11

只需更改标签顺序即可完成此操作。把事情简单化。

另一个简单的选择是将返回按钮放在 HTML 代码中的提交按钮之后，但将其浮动到左侧，以便它出现在提交按钮之前的页面上。

于 2012-11-27T22:27:41.790 回答
10

另一个简单的选择是在 HTML 代码中将后退按钮放在提交按钮之后，但将其浮动到左侧，因此它出现在提交按钮之前的页面上。

只需更改标签顺序即可完成此操作。把事情简单化。

于 2014-10-14T16:02:21.190 回答
10

The first time I came up against this, I came up with an onclick()/JavaScript hack when choices are not prev/next that I still like for its simplicity. 它是这样的：

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

当单击任一提交按钮时，它将所需的操作存储在隐藏字段中（这是包含在与表单关联的模型中的字符串字段）并将表单提交给控制器，控制器完成所有决定。在 Controller 中，您只需编写：

// 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
}

您也可以使用数字操作代码稍微加强这一点，以避免字符串解析，但除非您使用枚举，否则代码的可读性、可修改性和自记录性较差，而且解析是微不足道的。

于 2015-09-03T13:30:10.540 回答
9

来自https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

表单元素的默认按钮是树形顺序中的第一个提交按钮，其表单所有者是该表单元素。

如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段被聚焦时，按下“回车”键会隐式提交表单）......

让下一个输入为 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>
于 2015-03-28T21:05:52.650 回答
8 
<input type="submit" name="prev" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page">

保持所有提交按钮的名称相同：“prev”。

唯一的区别是value具有唯一值的属性。当我们创建脚本时，这些唯一值将帮助我们确定哪个提交按钮被按下。

并编写以下代码：

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
于 2012-06-05T09:19:59.430 回答
8

这是我尝试过的：

  1. 您需要确保为按钮提供不同的名称
  2. 编写一个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();
}
于 2014-03-03T06:16:35.067 回答
7

当我试图找到基本上相同的事情的答案时，我遇到了这个问题，只有 ASP.NET 控件，当我发现 ASP 按钮有一个名为的属性UseSubmitBehavior，允许您设置哪个提交。

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

以防万一有人正在寻找 ASP.NET 按钮的方式来做到这一点。

于 2016-03-24T17:29:22.140 回答
6

使用 JavaScript（这里是 jQuery），您可以在提交表单之前禁用 prev 按钮。

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
于 2015-08-14T10:01:14.613 回答
2

我以这种方式解决了一个非常相似的问题：

  1. 如果启用了 JavaScript（现在大多数情况下），那么所有提交按钮都会在通过 JavaScript (jQuery) 加载页面时“降级”为按钮。“降级”按钮类型按钮上的点击事件也通过 JavaScript 处理。

  2. 如果未启用 JavaScript，则表单将通过多个提交按钮提供给浏览器。在这种情况下，在表单中点击Enteratextfield将使用第一个按钮而不是预期的default提交表单，但至少该表单仍然可用：您可以使用prev和next按钮提交。

工作示例：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

    <body>
        <form action="http://httpbin.org/post" method="post">
            If JavaScript  is disabled, then you CAN submit the form
            with button1, button2 or button3.

            If you press enter on a text field, then the form is
            submitted with the first submit button.

            If JavaScript is enabled, then the submit typed buttons
            without the 'defaultSubmitButton' style are converted
            to button typed buttons.

            If you press Enter on a text field, then the form is
            submitted with the only submit button
            (the one with class defaultSubmitButton)

            If you click on any other button in the form, then the
            form is submitted with that button's value.

            <br />

            <input type="text" name="text1" ></input>
            <button type="submit" name="action" value="button1" >button 1</button>
            <br />

            <input type="text" name="text2" ></input>
            <button type="submit" name="action" value="button2" >button 2</button>
            <br />

            <input type="text" name="text3" ></input>
            <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button>
        </form>

        <script>
            $(document).ready(function(){

                /* Change submit typed buttons without the 'defaultSubmitButton'
                   style to button typed buttons */
                $('form button[type=submit]').not('.defaultSubmitButton').each(function(){
                    $(this).attr('type', 'button');
                });

                /* Clicking on button typed buttons results in:
                   1. Setting the form's submit button's value to
                      the clicked button's value,
                   2. Clicking on the form's submit button */
                $('form button[type=button]').click(function( event ){
                    var form = event.target.closest('form');
                    var submit = $("button[type='submit']",form).first();
                    submit.val(event.target.value);
                    submit.click();
                });
            });
        </script>
    </body>
</html>

于 2018-01-09T15:26:05.393 回答
1

您可以使用Tabindex来解决这个问题。更改按钮的顺序也是实现此目的的更有效方法。

更改按钮的顺序并添加float值以将它们分配到要在HTML视图中显示的所需位置。

于 2018-04-25T06:28:32.217 回答
0

与其为多次提交、JavaScript 或类似的东西做一些上一个/下一个事情而苦苦挣扎，另一种选择是使用轮播来模拟不同的页面。这样做：

  • 您不需要多个按钮、输入或提交来执行上一个/下一个操作，您input type="submit"只有一个form。
  • 在提交表单之前，整个表单中的值都存在。
  • 用户可以完美地转到任何上一页和任何下一页来修改值。

使用 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>
于 2020-12-10T17:29:56.210 回答
0

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

因此，当用户单击上一个按钮时，type它将更改为submit，并且表单将与上一个按钮一起提交。

<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>
于 2021-01-07T12:00:17.193 回答
0

一种可能比 CSS 浮动方法更现代的方法可能是使用具有orderflex 项属性的 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>

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

于 2021-08-26T15:57:17.787 回答
-1

当用鼠标单击按钮（希望通过触摸）时，它会记录 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
}
于 2021-01-03T10:45:16.737 回答
-4

使用您给出的示例：

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

如果您点击“上一页”，则只会提交“上一页”的值。如果您单击“下一页”，则只会提交“下一页”的值。

但是，如果您按Enter表单上的某个位置，则不会提交“prev”或“next”。

因此，使用伪代码可以执行以下操作：

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
于 2008-08-05T15:08:42.037 回答