jQuery按钮使用Enter键功能提交 [英] jQuery button submit with enter key function

问题描述

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

I have a button submit like this :

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

并且我有这样的jQuery提交:

and I have jQuery submit like this :

$(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键进行提交，因此用户必须单击登录"按钮才能提交.

The problem is : we can't submit using enter key, so user must click the button Sign in to submit.

我想要什么?将回车键设置为JS功能，以便用户可以使用回车键选择提交或单击登录按钮.

What I want ? set enter key into JS function, so user can choose submit using enter key or click the button Sign in.

感谢您的帮助.

推荐答案

检查此演示 http://jsfiddle.净/yeyene/hd7zqafg/

首先单击结果框架(因为还有其他框架)，然后按Enter，则在按Enter键时将触发提交按钮单击事件.在按钮上单击.

First click on the result frame (because there are another frames), and press enter, the submit button click event will fire on Enter key press & on button click.

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

这篇关于jQuery按钮使用Enter键功能提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！