logo标签列表

jQuery按Enter键提交按钮功能

jquery
5

我有一个提交按钮，像这样：

<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功能，以便用户可以选择使用回车键或单击“登录”按钮进行提交。
感谢任何帮助。
表单还包括什么？这将决定如何解决问题。 - DevlshOne
按钮必须获得焦点（使用Tab键），然后按Enter键。 - Habibillah
哦，你想在按钮上添加按键事件？这是如下所述的示例原则.. $("#button_sign_in").bind("keypress", function(e){ //检查 e.keyCode === 13.. 如果为真，则执行 post }) - Brett Caswell
7个回答
13

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

首先在结果框架上单击（因为还有其他框架），然后按回车键，提交按钮单击事件将在按下回车键和单击按钮时触发。

$(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);
                }
            });
        });
    });
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();
    }
});
我选择在调试器部分中复制代码，但是使用带有字符串参数的方法调用可能是更好的选择。 - Brett Caswell
1

将input元素包裹在一个表单中。如果在文本框中按下回车键，它会提交这个表单。

HTML

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

将类型更改为"submit"，并在
上调用.submit()而不是.click()。
$('form').submit(function(){
    console.log('login');
});

http://jsfiddle.net/nQ5fN/

嗨，我正在使用按钮抖动。因此，如果我更改输入类型为提交类型，则该按钮将无法工作。 - HiDayurie Dave
按钮抖动是什么意思？信息不足。 - hzoo
我非常确定表单元素的提交方法是表单元素的一部分，与该表单是否具有input[type=submit]子元素实例无关。 - Brett Caswell
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();
  }
});
0
如果你只使用jQuery.Ajax，当你按下“enter”键时肯定无法提交。 你必须添加
标签来实现它，并更改JS。
$('form').submit(function(){ //do ajax here })
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>
请注意，以下示例中我更改了URL为“about: blank”，并注释掉了shake方法。注意：只返回翻译的文本内容，不要解释它。 - Brett Caswell
0
将您的输入类型更改为提交，并防止默认提交按钮。此外，您的提交按钮应该被一个表单包裹。 $("form").on("submit", function() { return false; });
是的.. OP 给出了不完整的代码示例，但在表单提交时返回 false 的目的是什么？或者干脆不要使用事件处理程序？他并没有尝试将表单提交为 'application/x-www-form-urlencoded'。 - Brett Caswell
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接