如何启用 ENTER 按钮发送消息答案

【问题标题】：How to enable ENTER button to send messages如何启用 ENTER 按钮发送消息
【发布时间】：2016-01-06 22:54:46
【问题描述】：

如何使用此脚本使回车按钮立即发送消息？我在网站上尝试了其他解决方案，但我没有自己编写代码。

$(document).ready(function () {

    $("#send_massage").click(function () {

        $("#send_massage").addClass("disabled");

        var variabila = $("#text-massage").val();
        var mesaj = "massage=" + variabila;

        $.ajax({
            type: "POST",
            url: "/ajax/chat.php",
            cache: false,
            data: mesaj,
            success: function (test) {
                $("#text-massage").val('');
                //$("#success").show("fast").delay(900).hide("fast");
                $("#success").html(test);
                $("#send_massage").removeClass("disabled");

            }
         });

     });

});

【问题讨论】：

这是什么编程语言？请添加标签以反映这一点。
你应该显示你的html代码
也许你应该把它放在一个表单中并捕获提交事件，这取决于你使用的是输入字段还是文本区域。请添加您的html，以便我们给您更好的答案

标签： javascript jquery message send messages

【解决方案1】：

您可以尝试使用keyup 函数将元素（如document）上的事件绑定到您的函数。在函数中，您检查第一个参数（e）的type，看看它是否是keyup 事件。如果是，则仅在按下enter 键（keyCode of 13）时继续：

if(typeof e.type !== 'string' || (e.type == 'keyup' && e.keyCode != 13)) {
    return;
}

尝试在下面的示例中单击并键入不同的键。您会看到按钮上的enter 键和clicking 都会导致调用：

function sendMessage(e) {
    $("#send_massage").addClass("disabled");
    if(typeof e.type !== 'string' || (e.type == 'keyup' && e.keyCode != 13)) {
        return $('#status').html('no call');
    }
    $('#status').html('made call');
    var variabila = $("#text-massage").val();
    var mesaj = "massage=" + variabila;

    $.ajax({
        type: "POST",
        url: "/ajax/chat.php",
        cache: false,
        data: mesaj,
        success: function (test) {
            $("#text-massage").val('');
            //$("#success").show("fast").delay(900).hide("fast");
            $("#success").html(test);
            $("#send_massage").removeClass("disabled");

        }
    });

}
$(document).ready(function () {

    $("#send_massage").click(sendMessage);
    $(document).keyup(sendMessage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary" type="submit" data-loading-text="<i class='fa fa-spinner fa-spin'></i> WAIT..." id="send_massage" style="margin-right:6px;">SEND</button>
<div id='status'></div>

【讨论】：

在我的 php 文件中，我有。如何在代码中实现第二部分
@bagda391 更新为使用按钮。
如果你点击运行代码 sn-p 然后点击整页并回车，它不会给出任何结果
@bagda391 这是因为当点击fullPage时按钮不再在focus中
lockthepot.com 右侧发送按钮不起作用：/。这是按钮的代码

【解决方案2】：

请尝试此代码。这应该对你有帮助

function sendMessage(e) {
    $("#send_massage").addClass("disabled");
    if(typeof e.type !== 'string' || (e.type == 'keyup' && e.keyCode != 13)) {
        return $('#status').html('no call');
    }
    $('#status').html('made call');
    var variabila = $("#text-massage").val();
    var mesaj = "massage=" + variabila;

    $.ajax({
        type: "POST",
        url: "/ajax/chat.php",
        cache: false,
        data: mesaj,
        success: function (test) {
            $("#text-massage").val('');
            //$("#success").show("fast").delay(900).hide("fast");
            $("#success").html(test);
            $("#send_massage").removeClass("disabled");

        }
    });

}
$(document).ready(function () {
    $(document).focus();
    $("#send_massage").click(sendMessage);
    $(document).keyup(sendMessage);

    $("input").keypress(function(event) {
        if (event.which == 13) {
            event.preventDefault();
            sendMessage();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" style="width:300px;" placeholder="Please enter a value here and hit enter" />
<button class="btn btn-primary" type="submit" data-loading-text="<i class='fa fa-spinner fa-spin'></i> WAIT..." id="send_massage" style="margin-right:6px;">SEND</button>
<div id='status'></div>

【讨论】：

脚本很好，但是当我开始添加文本时，按钮的颜色会消失。有什么解决办法吗？