在 HTML 表单提交上制作 Enter 键而不是激活按钮

Posted 2023-03-05

【中文标题】在 HTML 表单提交上制作 Enter 键而不是激活按钮

【英文标题】：Making Enter key on an HTML form submit instead of activating button

【发布时间】：2012-01-07 19:56:19

【问题描述】：

我有一个带有单个 submit 输入的 html 表单，还有各种 button 元素。当用户按下“输入”键时，我希望它实际提交表单，但相反（至少在 Chrome 15 中）我发现它触发了第一个 button（因为它发生在 HTML 的早期比submit 输入，我猜）。

我知道通常你不能强迫浏览器偏爱特定的submit 输入，但我真的认为他们会偏爱submit 输入而不是button 元素。我可以对 HTML 进行一些小调整以使其工作，还是我必须采用某种 javascript 方法？

这是 HTML 的粗略模型：

<form action="form.php" method="POST">
    <input type="text" name="field1"/>
    <button onclick="return myFunc1()">Button 1</button>
    <input type="submit" name="go" value="Submit"/>
</form>

【问题讨论】：

检查这个问题：***.com/a/925387/1031900

@OfirFarchy 我想我认为这个问题的不同之处在于只有一个提交，其他都是按钮。

好吧，如果您不反对使用 JS 和 jQuery，请查看我和大卫的答案

【参考方案1】：

$("form#submit input").on('keypress',function(event) 
  event.preventDefault();
  if (event.which === 13) 
    $('button.submit').trigger('click');
  
);

【参考方案2】：

我只是遇到了这个问题。将input 更改为button 导致我的失败，而且我的/> 标记终止符写得不好：

所以我有：

<button name="submit_login" type="submit" class="login" />Login</button>

并且刚刚将其修改为：

<button name="submit_login" type="submit" class="login">Login</button>

现在就像一个魅力，总是烦人的小东西...... HTH

【参考方案3】：

试试这个，如果按下回车键，你可以像这样捕获它，例如，我前几天开发了一个答案html button specify selected，看看这是否有帮助。

指定表单名称，例如yourFormName，那么您应该能够提交表单而无需关注表单。

document.onkeypress = keyPress;

function keyPress(e)
  var x = e || window.event;
  var key = (x.keyCode || x.which);
  if(key == 13 || key == 3)
   //  myFunc1();
   document.yourFormName.submit();
  

【讨论】：

如果表单有更多提交按钮，这将有所帮助： document.getElementById("submit").click();

这是一种绕过 HTML 中默认行为的钝方法。请参阅above answer 了解原因。

【参考方案4】：

我刚刚在 Chrome、Firefox 和 IE10 中试了一下。

如上所述 - 确保您已使用 type = "button"、"reset"、"submit" 等进行标记，以确保其正确级联并选择正确的按钮。

也许还可以将它们全部设置为具有相同的形式（即所有对我有用的形式）

【参考方案5】：

您不需要 JavaScript 来选择您的默认提交按钮或输入。您只需用type="submit" 标记它，其他按钮用type="button" 标记它们。在您的示例中：

<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>

【讨论】：

这实际上在某些浏览器中无法正常工作。我今天刚遇到这个问题，认为 type="submit" 会使其成为默认值，但它不会在 Chrome 或 Safari 中。

它适用于我的 Chrome 和 Safari。它一定是别的东西。

在额外的按钮上设置 type="button" 和设置 type="submit" 是有区别的。

不设置type="button"不起作用的原因是默认情况下，按钮元素是type="submit"。所以问题中只有一个提交按钮的前提实际上是不正确的。

【参考方案6】：

鉴于只有一个（或者此解决方案可能甚至没有一个）提交按钮，这里是基于 jQuery 的解决方案，适用于同一页面上的多个表单...

<script type="text/javascript">
    $(document).ready(function () 

        var makeAllFormSubmitOnEnter = function () 
            $('form input, form select').live('keypress', function (e) 
                if (e.which && e.which == 13) 
                    $(this).parents('form').submit();
                    return false;
                 else 
                    return true;
                
            );
        ;

        makeAllFormSubmitOnEnter();
    );
</script>

【参考方案7】：

你可以使用jQuery：

$(function() 
    $("form input").keypress(function (e) 
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) 
            $('button[type=submit] .default').click();
            return false;
         else 
            return true;
        
    );
);

【讨论】：

因为这是公认的答案：向下滚动以获得非常简单的纯 HTML 解决方案。

HTML 解决方案是正确答案。浏览器默认处理

我知道这是一个旧答案，但您不需要使用这种“重型设备”来解决这个问题。使用仅 HTML 的解决方案（@Jesús Carrera 的回答），浏览器现在处理这个问题。

这种方法的好处——虽然是的，它确实需要 jQuery/JavaScript——即使你需要在表单中有多个提交按钮，它也可以工作。但是，此示例中的特定选择器不应在 button[type=submit] 之后有空格，假设您已使用 default css 类标记了默认提交按钮。