4

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

<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 函数中设置回车键，因此用户可以选择使用回车键提交或单击按钮登录。

谢谢你的帮助。

4

7 回答 7

12

检查这个演示http://jsfiddle.net/yyene/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);
                }
            });
        });
    });
于 2013-07-12T02:50:45.500 回答
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();
    }
});
于 2013-07-12T02:21:51.003 回答
1

包装成input一个表格。如果您在文本框中按回车，它将提交表单。

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/

于 2013-07-12T02:09:14.230 回答
0

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

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>
于 2013-07-12T02:29:17.307 回答
0

将您的输入类型更改为提交并防止默认提交按钮。此外，您的提交按钮应由表单包裹。

$("form").on("submit", function() { return false; });

于 2013-07-12T02:09:28.930 回答
0

如果你只使用jQuery.Ajax，肯定不能按回车提交。您必须添加<form></form>标签才能实现它，并更改JS。

$('form').submit(function(){ //do ajax here })
于 2013-07-12T02:12:11.393 回答
0 
 // 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();
  }
});
于 2018-07-16T09:55:39.810 回答