带有回车键功能的 jQuery 按钮提交

Question

我有一个像这样提交的按钮:

<input type="button" id="button_sign_in" class="button_sign_in" value="Sign in"/>

我有 jQuery 提交，如下所示:

$(document).ready(function()
    {
        $('#button_sign_in').click(function(){
             console.log('login');
            $.ajax
            ({
                url: "login",
                type: "post",
                data: $('#login_form').serialize(),
                dataType:'json',
                success: function (data) 
                {
                    if (data.status=='SUCCESS') 
                    {
                        window.location='home.php'; 
                    }
                    else 
                    {
                        $('#button_sign_in').shake(4,6,700,'#CC2222');
                        $('#username').focus();
                    }
                },
                error: function (e) {
                    console.log('error:'+e);
                }
            });
        });
    });

问题是:我们无法使用 Enter 键提交，因此用户必须单击“登录”按钮才能提交。

我想要什么？在JS函数中设置回车键，以便用户可以选择使用回车键提交或单击按钮登录。

感谢您的帮助。

Answer 1

查看此演示 http://jsfiddle.net/yeyene/hd7zqafg/

首先单击结果帧(因为还有其他帧)，然后按 Enter 键，提交按钮单击事件将在按下 Enter 键和单击按钮时触发。

$(document).ready(function()               
    {
        // enter keyd
        $(document).bind('keypress', function(e) {
            if(e.keyCode==13){
                 $('#button_sign_in').trigger('click');
             }
        });

        $('#button_sign_in').click(function(){
            alert('You click submit!');
             console.log('login');
            $.ajax
            ({
                url: "login",
                type: "post",
                data: $('#login_form').serialize(),
                dataType:'json',
                success: function (data) 
                {
                    if (data.status=='SUCCESS') 
                    {
                        window.location='home.php'; 
                    }
                    else 
                    {
                        $('#button_sign_in').shake(4,6,700,'#CC2222');
                        $('#username').focus();
                    }
                },
                error: function (e) {
                    console.log('error:'+e);
                }
            });
        });
    });