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

问题是：我们无法使用回车键提交，因此用户必须单击按钮登录才能提交。

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

感谢您的帮助。

Answer 1

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

首先点击结果框（因为还有另一个框架），然后按回车键，提交按钮点击事件将在Enter键按下＆amp;点击按钮。

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

Answer 2

将对$.ajax的调用解压缩到名为submitForm的新函数。

然后将该函数绑定到可能导致提交的所有元素：

function submitForm() {
    $.ajax... etc.
}

$('#button_sign_in').on('click', submitForm);
$('#your_input_textbox').on('keypress', function(e) {
    if (e.keyCode === 13) {
        submitForm();
    }
});

Answer 3

将input包装在表单中。如果您在文本框中按Enter键，它将提交表单。

HTML

<form>
    <input type="text"/>
    <input type="submit" id="button_sign_in" class="button_sign_in" value="Sign in"/>
</form>

将input类型更改为"submit"并在.submit()上调用.click()而不是form。

JS

$('form').submit(function(){
    console.log('login');
});

http://jsfiddle.net/nQ5fN/

Answer 4

将输入类型更改为提交，并阻止提交按钮的默认设置。您的提交按钮也应该由表单包装。

$（“form”）。on（“submit”，function（）{return false;}）;

Answer 5

如果您只使用jQuery.Ajax，当您按输入时肯定无法提交。您必须添加<form></form>标记才能实现它，并更改JS。

$('form').submit(function(){ //do ajax here })

Answer 6

您需要将事件附加到正确的元素（可能是输入），我假设它是“用户名”（文本框）输入或（更可能）“密码”（密码）输入。

jsFiddle：http://jsfiddle.net/tyxPu/

jQuery部分

$(document).ready(function () {
    var xhrJSON;
    $('#button_sign_in').click(function () {
        console.log('login');
        xhrJSON = $.ajax({
            url: "about:blank",
            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();
                    $("#debugger").append("<p>Button Click - Failed to 'Sign In'</p>")
                }
            },
            error: function (e) {
                console.log('error:' + e);
                $("#debugger").append("<p>Error - Button Click - Failed to 'Sign In'</p>")
            }
        });
    });
    $("#username").keypress(function (event) {
        if (event.which == 13) {
            xhrJSON = $.ajax({
                url: "about:blank",
                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();
                        $("#debugger").append("<p>Button Click - Failed to 'Sign In'</p>");
                    }
                },
                error: function (e) {
                    $("#debugger").append("<p>Error - Keypress - Failed to 'Sign In'</p>");
                }
            });
        }
    });
});

HTML部分

<form id="login_form">
    <input type="textbox" id="username" placeholder="User Name" />
    <input type="button" id="button_sign_in" value="Sign In" />
</form>
<div id="debugger"></div>

Answer 7

 // Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Cancel the default action, if needed
  event.preventDefault();
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Trigger the button element with a click
    document.getElementById("myBtn").click();
  }
});

使用enter键功能提交jQuery按钮

7 个答案:

jQuery部分

HTML部分