Question

我的jQuery输入密钥有问题。对于表单登录，回车键是工作货物，但是对于表单重置密码，回车键不起作用，但点击它就可以。

不工作意味着：如果按Enter键，它将重定向到操作页面，而不会在我的JS中进行任何验证。

现在我想为表单重置密码设置回车键。

到目前为止，这是我的代码：

JS

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

        $('#button_sign_in').click(function()
        {
            if ( $("#username").val().length == 0 )
            {
                $('#button_sign_in').attr("disabled", false);
                $('#username').focus();
            }
            else if ( $("#password").val().length == 0 )
            {
                $('#button_sign_in').attr("disabled", false);
                $('#password').focus();
            }
            else if ( $("#username").val().length == 0 && $("#password").val().length == 0 )
            {
                $('#button_sign_in').attr("disabled", false);
                $('#username').focus();
            }
            else
            {
            $.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();
                        $('#password').val("");
                        $('#button_sign_in').attr("disabled", false);
                        $("#info").text("Wrong username or password.");
                    }
                },
                error: function (e) {
                    console.log('error:'+e);
                }
            });
            }
        });

$(document).bind('keypress', function(e)
        {
            if (e.keyCode == 13) {
                $('#button_reset').trigger('click');
            }
        });

        $('#button_reset').click(function()
        {
            if ( $("#email").val().length == 0 )
            {
                $('#button_reset').attr("disabled", false);
                $('#email').focus();
                $("#info2").text("Email is required.");
                $('#button_reset').shake(4,6,700,'#CC2222');
            }
            else
            {
            $.ajax
            ({
                url: "check_email",
                type: "post",
                data: $('#reset_form').serialize(),
                dataType:'json',
                success: function (data) 
                {
                    if (data.status=='FOUND') 
                    {
                        $("#info2").html('<span class="success">Password reset instructions has sent to your email.</span>');
                        $('#email').val("");
                        $('#email').focus();
                    }
                    else 
                    {
                        $('#button_reset').shake(4,6,700,'#CC2222');
                        $('#email').focus();
                        $('#button_reset').attr("disabled", false);
                        $("#info2").text("Email is invalid.");
                    }
                },
                error: function (e) {
                    console.log('error:'+e);
                }
            });
            }
        });
    });

Login Form的HTML代码如下：

<form id="login_form">
                            <div id="info"></div>

                            <table>                                 
                                <td><input type="text" name="username" class="input" id="username" placeholder="Username or email"/></td>

                                <tr>

                                <td><input type="password" name="password" class="input" id="password" placeholder="Password"/></td>

                                <tr>

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

                                <tr>

                                <td>
                                    <span class="keep_logged_in"><input type="checkbox"> Keep me logged in</span>
                                </td>
                            </table>
                        </form>

和表格重置如下：

<form id="reset_form" class="collapse">
                            <div id="info2" class="info2"></div>
                            <table class="t_info">
                                <td><input type="text" name="email" class="input" id="email" placeholder="Email"/></td>

                                <tr>

                                <td><input type="button" id="button_reset" class="button_reset" value="Submit"/></td>
                            </table>
                        </form>

我的代码有问题吗？

Answer 1

你有两个单独的按键处理程序绑定到document，并且没有任何东西可以测试用户按下回车时输入的字段。

为什么不将它们绑定到每个表单上呢：

    $("#login_form").bind('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            $('#button_sign_in').trigger('click');
        }
    });

    $("#reset_form").bind('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            $('#button_reset').trigger('click');
        }
    });

这样，当在表单中按下enter时，表单的按钮就是你触发点击的按钮。

Answer 2

您可以尝试采用更通用的方法，方法是选择相关的（最近的）form元素，然后触发提交。此外，我还建议您考虑将keypress事件应用于更具体的元素，例如：

$('input, select, textarea').bind('keypress', function(e)
{
    if (e.keyCode == 13) {
        $(this).closest('form').trigger('submit');
    }
});

Answer 3

不确定这是否正是您想要的，但似乎您希望在点击和输入时同时提交两个表单？

如果是这种情况，我认为你应该将你的AJAX调用绑定到form.submit，然后添加一个e.preventDefault来防止提交以默认行为行事（因为你想使用你的AJAX而不是默认的提交行为）。

某些人喜欢这样：

$('#login_form').submit(function(e){

    e.preventDefault()

    // now do your AJAX call for login_form here (the code of your $('#button_sign_in').click)

})

$('#reset_form').submit(function(e){

    e.preventDefault()

    // now do your AJAX call for reset_form here (the code of your $('#button_reset').click)

})

希望这有帮助

修改

您应该将两个按钮的type更改为submit

jQuery Enter键不能用于其他表单

3 个答案: