Jquery 更改表单提交的行为

我在我的主页上使用一个基本表单，它收集用户的电子邮件地址。没有Submit按钮，而是一个启动模式框的锚链接。（用户输入的电子邮件地址用于模式内容）

当用户填写表单电子邮件输入时，他们的本能反应是按enter键或单击“提交”链接。submit链接通过启动modal非常有效，但按enter键将尝试提交表单。我不希望用户提交表单，而是通过按下锚链接来启动模态

$(function(){
    $(document).on('keyup', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) { //Enter keycode
            //Stop the "submit", nothing will happen when user press enter
            e.preventDefault();
        }
    });
});​

有没有办法：

A） 更改enter的默认行为以启动模式而不是提交表单

或

B） 禁用Enter按钮提交表单并强制用户单击锚链接

---

我使用的语法非常简单，如下所示：

<a href="#newsForm" rel="leanModal" class="submitModal">Submit</a>

<div id="#newsForm">Modal content here</div>

这里的模态内容

注意：我无法将提交输入用作“模式启动器”，因为模式与输入不兼容。

A）更改enter的默认行为以启动模式而不是提交表单：

$(function(){
    $(document).on('keyup', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) { //Enter keycode
            //If user press enter will open the modal
            $('.submitModal').click();
        }
    });
});​

B）禁用Enter按钮提交表单，并强制用户单击锚链接

$(function(){
    $(document).on('keyup', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) { //Enter keycode
            //Stop the "submit", nothing will happen when user press enter
            e.preventDefault();
        }
    });
});​

C）另一种选择：您可以“覆盖”

submit（）执行以下操作的功能：

$(function() {
    $('#newsForm').submit(function(e) {
        $('.submitModal').click();
        e.preventDefault();
    });
});

A）更改enter的默认行为以启动模式而不是提交表单：

$(function(){
    $(document).on('keyup', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) { //Enter keycode
            //If user press enter will open the modal
            $('.submitModal').click();
        }
    });
});​

B）禁用Enter按钮提交表单，并强制用户单击锚链接

$(function(){
    $(document).on('keyup', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if(code == 13) { //Enter keycode
            //Stop the "submit", nothing will happen when user press enter
            e.preventDefault();
        }
    });
});​

C）另一种选择：您可以“覆盖”
submit（）执行以下操作的功能：

$(function() {
    $('#newsForm').submit(function(e) {
        $('.submitModal').click();
        e.preventDefault();
    });
});

我宁愿推荐这样的东西

$(function() {
    $('#newsForm').submit(function( jqEvt ) {
        jqEvt.preventDefault();
        $('.submitModal').click();
    });
});

我宁愿推荐这样的东西

$(function() {
    $('#newsForm').submit(function( jqEvt ) {
        jqEvt.preventDefault();
        $('.submitModal').click();
    });
});

两种选择A&C听起来都很棒；虽然当我尝试键入电子邮件并按enter键时，它仍会提交表单，并且不会启动模式。您可以在页脚顶部的“保持联系”区域尝试：选项C不应该与选项A相同吗？它使用preventDefault禁用提交，并通过单击按钮启动模式？？？这是应该发生的事情，但事实并非如此。@JCHASE11为什么要输入类型submit进行搜索？我认为将类型更改为“按钮”并做一些额外的操作来提交搜索将解决您的modal的问题。这不是搜索，而是页面底部的新闻稿提交。实际上，此表单没有输入type=submit，因为它被锚替换。想法？@JCHASE11如果您使用chrome控制台检查浏览器中的元素，您将发现searchform的输入类型submit。好吧，我给你举个例子，等等，A&C两个选项听起来都不错；虽然当我尝试键入电子邮件并按enter键时，它仍会提交表单，并且不会启动模式。您可以在页脚顶部的“保持联系”区域尝试：选项C不应该与选项A相同吗？它使用preventDefault禁用提交，并通过单击按钮启动模式？？？这是应该发生的事情，但事实并非如此。@JCHASE11为什么要输入类型submit进行搜索？我认为将类型更改为“按钮”并做一些额外的操作来提交搜索将解决您的modal的问题。这不是搜索，而是页面底部的新闻稿提交。实际上，此表单没有输入type=submit，因为它被锚替换。想法？@JCHASE11如果您使用chrome控制台检查浏览器中的元素，您将发现searchform的输入类型submit。好吧，我给你举个例子，等等，这和@OscarJara答案中的选项C是一样的。在Enter上，它仍然提交表单并将用户带到页面的顶部，因为这不是动作…@ JScCe11认为我在Oscar Jara甚至更新他的选项之前发布了我的答案，甚至C.this选项和OscarJara回答的选项C一样。在输入时，它仍然提交表单并将用户带到页面的顶部，因为这是没有作用的…@ JScCe11认为我在Oscar Jara甚至更新了他甚至包含选项C之前发布了我的答案。