在按回车键时触发 jQuery 事件

Fire jQuery event on enter key press?

本文关键字:jQuery 事件 回车      更新时间:2023-09-26

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

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

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

使用 jQuery 的 submit() 函数捕获表单提交事件,并在其中返回 false。此函数将以您提交表单的任何方式调用(单击提交按钮或按回车键)。返回 false 将阻止浏览器完成表单总和,该表单允许您使用它做任何您想做的事情。

请参阅示例:http://jsfiddle.net/vgk4wu46/