首页 文章

使用jQuery在'Enter'上提交表单？

提问于
浏览 次
402

我有一个标准的登录表单 - 一个电子邮件文本字段，一个密码字段和一个使用HTML / jQuery的AIR项目的提交按钮 . 当我在表单上按Enter键时，整个表单的内容消失，但表单未提交 . 有谁知道这是否是一个Webkit问题（Adobe AIR使用Webkit for HTML），还是我已经把事情搞砸了？

我试过了：

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

但这既没有阻止清算行为，也没有提交表格 . 没有与表单相关的操作 - 这可能是问题吗？我可以在动作中加入javascript函数吗？

javascript jquery html webkit html-form

14 回答

  • 345

    这是一种作为JQuery插件执行此操作的方法（如果您想重新使用该功能）：

    $.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

    现在，如果你想用这种类型的功能来装饰它，它就像这样简单：

    $('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );
    回复于
  • 1

    我今天发现按下Enter键时没有触发按键事件，所以你可能想要切换到keydown（）或keyup（） .

    我的测试脚本：

    $('.module input').keydown(function (e) {
            var keyCode = e.which;
            console.log("keydown ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keyup(function (e) {
            var keyCode = e.which;
            console.log("keyup ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keypress(function (e) {
            var keyCode = e.which;
            console.log("keypress ("+keyCode+")");
            if (keyCode == 13) {
                console.log("Enter");
                return false;
            }
        });

    在键盘上键入“A Enter B”时控制台中的输出：

    keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

    您在第二个序列中看到'keypress'缺失，但是keydown和keyup注册代码'13'被按下/释放 . 根据jQuery documentation on the function keypress()：

    Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

    在Server 2012 R2上测试IE11和FF61

    回复于
  • -4

    返回 false 以防止击键继续 .

    回复于
  • 4

    只需添加即可轻松实施 . 您只需创建一个表单，然后隐藏提交按钮：

    例如：

    <form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>
    回复于
  • 28

    不知道它是否有用，但您可以尝试模拟提交按钮单击，而不是直接提交表单 . 我在 生产环境 中有以下代码，它工作正常：

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

    注意：按下Enter键时， jQuery('#submit').focus() 使按钮具有动画效果 .

    回复于
  • 13
    $('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

    注意：您接受了bendewey的答案，但它对e.preventDefault（）的描述不正确 . 看看这个stackoverflow答案：event.preventDefault() vs. return false

    基本上，"return false"与调用 e.preventDefault 和 e.stopPropagation() 相同 .

    回复于
  • 2

    有没有理由你必须挂钩并测试输入键？

    你不能简单地添加一个

    <input type="submit" />

    到你的表格，并在推入时自然提交？你甚至可以勾选表单的 onsubmit 动作并从那里调用验证函数，如果你想...

    您甚至可以使用 onsubmit 作为测试来查看您的表单是否正在提交，但如果您调用 form.submit() 则它将无效 .

    回复于
  • 12

    另外，为了保持可访问性，您应该使用它来确定您的密钥代码：

    c = e.which ? e.which : e.keyCode;

if (c == 13) ...
    回复于
  • 2

    我现在用

    $("form").submit(function(event)

    起初我在提交按钮中添加了一个事件处理程序，这对我产生了错误 .

    回复于
  • 4

    试试这个：

    var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}
    回复于
  • 0

    除了Jason Cohen提到的返回假 . 您可能还必须阻止默认

    e.preventDefault();
    回复于
  • 61

    这是我的代码：

    $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });
    回复于
  • 77

    您也可以简单地将 onsubmit="return false" 添加到页面中的表单代码以防止默认行为 .

    然后将表单的 submit 事件挂钩（ .bind 或 .live ）到javascript文件中带有jQuery的任何函数 .

    这是一个示例代码，可以帮助您：

    HTML

    <form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

    Javascript + jQuery

    $(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

    这是在2011-04-13，使用Firefox 4.0和jQuery 1.4.3

    回复于
  • 173

    在HTML代码中：

    <form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

    在Js代码中：

    function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}
    回复于

相关问题