Question

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

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

有没有办法：

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

或

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

我正在使用leanmodal，这非常简单，语法如下：

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

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

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

Answer 1

我宁愿推荐这样的东西。

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

Answer 2

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();
    });
});

改变表单提交的行为

2 个答案: