如何启用 ENTER 按钮发送消息

Posted 2023-03-14

【中文标题】如何启用 ENTER 按钮发送消息

【英文标题】：How to enable ENTER button to send messages

【发布时间】：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，以便我们给您更好的答案

【参考方案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>

【讨论】：

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