输入按键时触发jQuery事件？答案

【问题标题】：Fire jQuery event on enter key press?输入按键时触发jQuery事件？
【发布时间】：2014-11-22 07:44:28
【问题描述】：

我正在尝试使用 jQuery 提交一个 Rails 表单（我对此知之甚少），并且成功地设置了一个表单以在单击提交按钮时提交并运行回调（我相信这是正确的术语？ )，但我也想让它在按 Enter 时工作。

就目前而言，按 Enter 会将数据提交到数据库，但不会运行附加 div 或清除文本字段的命令。我怎样才能做到这一点，以便它对输入键的工作方式与提交按钮的工作方式相同？我试图将代码包装在一个函数中，该函数将在输入时运行但没有运气！

function runScript(e) {
if (e.keyCode == 13) {
    msg = json.msg;
    foreign = json.foreign_speaker;
    msg_translated = json.msg_translated;
    //The HTML that we will append to the document.
    html = "<div class='msg msg" + foreign + "'>" + msg +
            "</div> <div class='msg msg" + foreign + "-translation'>" + msg_translated + "</div>"

    // Append new message.
    $('.chatmessages').append(html).fadeIn('fast');
    scrollToBottom(500)
    // Clear form with jquery.
    $('#message_msg').val('');
    $('#message_foreign_speaker').attr('checked', false);
}

}

我试过了，但没有运气。

我当前的按钮工作 JS 文件：

var scrollToBottom = function(anim){
var myDiv = $(".wrap");
myDiv.animate({ scrollTop: myDiv[0].scrollHeight - myDiv.height() }, anim);
};

$(document).ready(function(){
scrollToBottom(0)
//JS to POST form
$('.submit').click(function() {
    var valuesToSubmit = $('.msgform').serialize();
    $.ajax({
        type: 'POST',
        url: window.location.href + '/messages', //sumbits it to the given url of the form
        data: valuesToSubmit,// { chat_id, <%= @chat.id %> },
        dataType: "JSON", // you want a difference between normal and ajax-calls
    })
    .done(refresherFunc)
    .fail(function(){
        alert("Error sending message. It would be nice to make this a flash error.");
    });
    return false; // prevents normal behaviour
})
});

var refresherFunc = function(json) {
// Get debugging goodies.
console.log(json);

// Set variables with JSON object data
msg = json.msg;
foreign = json.foreign_speaker;
msg_translated = json.msg_translated;
//The HTML that we will append to the document.
html = "<div class='msg msg" + foreign + "'>" + msg +
        "</div> <div class='msg msg" + foreign + "-translation'>" + msg_translated + "</div>"

// Append new message.
$('.chatmessages').append(html).fadeIn('fast');
scrollToBottom(500)
// Clear form with jquery.
$('#message_msg').val('');
$('#message_foreign_speaker').attr('checked', false);
}

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

使用 jQuery 的 submit() 函数捕获表单提交事件并在其中返回 false。这个函数会以任何你提交表单的方式被调用（点击提交按钮或按下回车键）。返回 false 将阻止浏览器完成表单提交，让您可以随心所欲地使用它。

查看示例：http://jsfiddle.net/vgk4wu46/

【讨论】：