输入按钮作为提交

Question

我需要使用 Enter 键提交表单，但是，我必须使用 BUTTON 而不是 SUBMIT 作为类型，以便页面不刷新。如何让我的按钮充当“提交”并在有人按下回车键时执行？

<form>
<input type=text ...>
<input type=button ...>
</form>

我发现的很多关于这方面的信息都提到了 Netscape/IE/很多过时的材料。

这是我的 HTML 输出，我希望隐藏提交按钮并使用 ENTER：

https://i。 sstatic.net/Ohepe.png

Answer 1

启用 Javascript

<input type="button" onclick="this.form.submit()" ... /> 

应该可以工作

Answer 2

我必须使用 BUTTON 而不是 SUBMIT 作为类型，以使页面不刷新

Nah。使用普通的submit按钮来刷新页面。 （理想情况下，为了可访问性，让它发挥作用！）然后添加渐进增强，以在 JS 可用时用更流畅的操作替换表单的提交操作。在这种情况下，请使用 return false （或 DOM 2 事件模型中的 event.preventDefault()）来停止表单提交。

<form id="foo" method="POST" action="dosomething.script">
    ...
    <input type="submit" value="Do something"/>
</form>

document.getElement('foo').onsubmit= function() {
    beginAJAXSubmission();
    return false;
};

捕获表单的 submit 事件通常比尝试获取按钮上的 click 更好，因为它始终会在表单正常提交时触发，包括按 Enter 键时触发。 单击表单中的第一个提交按钮通常会在按下 Enter 按键时触发，但也有一些情况（取决于表单中的控件数量以及浏览器） ）而这种情况不会发生，因此您可能最终无法实际提交表单。

Answer 3

正如其他人所说，你必须使用 Javascript。我推荐JQuery框架。

但我不明白刷新是什么？

正常的方式是您点击提交，您的表单将通过请求发送到服务器。
服务器处理数据并返回响应（HTML/JSon..etc），该响应通常会重定向到结果页面（以避免刷新时重新发布的著名警告）。

现在，如果您的表单只是较大页面的一小部分，您可能需要使用 ajax 来发布小表单，然后获取结果并更新您的 DOM。

综上所述，没有什么可以阻止您使用按钮的提交类型，这实际上是使您的 Enter 键默认执行此操作的最佳方法。您所要做的就是使用 Jquery 并拦截表单的提交并进行 ajax 调用，而不是采用正常的方式。

您会发现大量使用 JQuery 的示例，因为它可能是最常用的 JavaScript 框架。

希望有帮助