使用 Enter 按钮进行无形式“表单”提交答案

【问题标题】：Formless "form" submission using enter button使用 Enter 按钮进行无形式“表单”提交
【发布时间】：2013-02-06 20:03:14
【问题描述】：

我们目前正在使用 Dojo Mobile 构建一个应用程序，并且有几个区域我们有输入字段和提交按钮。这些输入字段和提交按钮不在表单中，我们只是使用 onclick 事件来“提交”要在 javascript 中使用的字段中的值。有没有办法让它在我们按下“enter”时，或者在移动应用程序的情况下，当用户在他们的软键盘上按下“search”或“go”时，它会触发那个特定的按钮？我们可能在同一页面上有多个提交按钮。

 ...
<div>
    <input dojoType="dijit.form.TextBox" />
    <button dojoType="dijit.form.Button" type="submit">
        Filter
    </button>
<div>
 ...

【问题讨论】：

为什么不用表格？

标签： javascript html dojo

【解决方案1】：

将您的相关字段放在表单中。注册一个“onsubmit”事件处理程序并使其与按钮的“onclick”处理程序相同。当您从事件处理程序返回时，您应该返回 false 或调用 event.preventDefault()。这将阻止表单提交（通过 POST）到服务器。

【讨论】：

【解决方案2】：

jQuery 中的解决方案：

//when you a key on an input
$("input").keyup(function (e) {
    //if it is enter
    if (e.keyCode == 13) {
        //look for the next submit button a trigger a click
        $(this).next("button[type='submit']").click();
    }
});

我不是道场编码员，但文档看起来相当不错：

http://dojotoolkit.org/documentation/tutorials/1.6/key_events/

http://dojotoolkit.org/api/1.6/dojo/keys/ENTER

覆盖默认表单提交操作

您可以覆盖表单上的默认提交操作。将表单保留在 <form> 标记内从语义上讲是明智的，即使您想覆盖默认行为并做您想做的事，作为坚强、独立的黑人女性。

jsFiddle

HTML：

<form id="myForm">
    <input type="text" />
    <button type="submit">Submit</button>
</form>

JavaScript：

var myForm = document.getElementById('myForm');
myForm.addEventListener('submit',function(event){
    alert('submit pressed -- do as you please');
    event.preventDefault(); // cancels form submission
});

//追逐。

【讨论】：

@MarcelKorpel：哪一个？他们全部？如果没有，为什么不呢？
IE 8及以下不理解addEventListener通过window.event提交Event对象。