当没有提交按钮时按下回车键时获取表单提交答案

【问题标题】：Getting a form to submit when the enter key is pressed when there is no submit button当没有提交按钮时按下回车键时获取表单提交
【发布时间】：2021-02-10 06:01:00
【问题描述】：

我有一个没有提交按钮的表单，如果在用户按下回车键时表单仍然提交，那就太好了。我尝试添加一个隐藏的提交按钮，它在 Safari、Firefox 和 Chrome 中为我提供了所需的行为，但该表单仍未在 IE 中提交。有这样做的标准方法吗？

【问题讨论】：

为什么没有提交按钮？这是不好的可用性。我想很多用户会感到困惑，不知道该怎么办。问题是你正在做一些意想不到的事情。用户期望每个表单至少有某种提交按钮。不要忘记：不要让用户感到惊讶。
@Felix 我们有一个由定义按钮的 div 包裹的 href，以便我们可以根据需要设置它的样式。所以在视觉上，有一个提交按钮，但表单中没有“提交”类型的输入标签。你会说这是错误的做法吗？
啊，我明白了，我理解更广泛意义上的提交按钮 ;)。不，我想这很好，只要您清楚地表明这是提交表单的按钮/链接。我会把它设计成一个按钮（至少不像标准链接）。
— 设计一个真实的按钮，而不是尝试用 JavaScript 模拟一个。

标签： html

【解决方案1】：

经过测试/跨浏览器：

function submitOnEnter(e) {
    var theEvent = e || window.event;
    if(theEvent.keyCode == 13) {
        this.submit;
    }
    return true;
}
document.getElementById("myForm").onkeypress = function(e) { return submitOnEnter(e); }

<form id="myForm">
<input type="text"/>
...
</form>

如果没有提交按钮，如果javascript不可用，表单会严重退化！

【讨论】：

不应该是*on*keypress吗？
@Andy E - 谢谢，确实应该修复:)

【解决方案2】：

使用 jQuery（自然）：

$("#myForm input").keyup(
    function(event){
        if(event.keycode == 13){
            $(this).closest('form').submit();
        }
    }
);

试试看。

【讨论】：

表单通常在按下回车键时提交（无论如何在 Windows 上），而不是抬起。
我选择了这个答案，但它应该是 event.keyCode

【解决方案3】：

文本框或某些控件的onKeyDown事件调用javascript函数并添加form.submit();函数声明。

编码愉快！！

【讨论】：

【解决方案4】：

这是你的意思吗？

document.myformname.submit();

【讨论】：

【解决方案5】：

这将需要 JavaScript。如果您不了解该语言，使用 JavaScript 实现此功能的最简单方法是使用 jQuery 之类的东西（很像 inkedmn 所说的）。

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    <!--
        $(document).ready(function() {
            $(document).keyup(function(event){
                if(event.keycode == 13){ // This checks that it was the Enter key
                    $("#myForm").submit(); // #myForm should match the form's id attribute
                }
            });
        });
    //-->
    </script>
</head>
<body>
    <form id="myForm">
    ...
    </form>
</body>

有关 jQuery 的更多信息： http://docs.jquery.com/Tutorials:How_jQuery_Works#jQuery:_The_Basics

【讨论】：

【解决方案6】：

你知道你可以在那里放一个<button type="submit">submit</button> 并用css改变他的位置，对吧？ position:absolute;left:-9999px; 应该可以解决问题。 display:none 将不起作用。

如果没有加载js，这也可以。

编辑：但是，如果你选择使用js，如果你有textarea，别忘了不要提交。

【讨论】：

【解决方案7】：

这可以通过保持提交输入完整和一些创造性的 CSS 来实现跨浏览器。通过保持输入可用，您还可以保留对屏幕阅读器的支持。

    .no-submit-button {
      position: relative;
    }

    .hidden-submit {
      border: 0;
      clip: rect(0, 0, 0, 0);
      height: 1px;
      margin: -1px;
      padding: 0;
      position: absolute;
      width: 1px;
    }

    <form class="no-submit-button">
      <input class="hidden-submit" type="submit" value="Submit">
    </form>

【讨论】：