将 onclick 按钮添加到 textarea 中的 onkeyup 函数

Posted 2023-05-07

【中文标题】将 onclick 按钮添加到 textarea 中的 onkeyup 函数

【英文标题】：Add onclick button to onkeyup function in textarea

【发布时间】：2021-06-18 07:06:40

【问题描述】：

function sendMessage(e)

    if (e.which == 13 && ! e.shiftKey) 
        var id = $('#form-message-write input').val();
        var message = $('#form-message-write textarea').val();

        if (message.trim() != '') 
            var data = new FormData();
            data.append('id', id);
            data.append('message', message);

            $.ajax(
                url: BASE_URL + '/direct-messages/send',
                type: "POST",
                timeout: 5000,
                data: data,
                contentType: false,
                cache: false,
                processData: false,
                headers: 'X-CSRF-TOKEN': CSRF,
                success: function (response) 
                    if (response.code == 200) 
                        $('.dm .chat .message-list .alert').remove();
                        $('#form-message-write textarea').val("");
                        $('.dm .chat .message-list').append(response.html);
                        $(".dm .chat .message-list").animate( scrollTop: $('.dm .chat .message-list').prop("scrollHeight"), 1000);
                     else 
                        $('#errorMessageModal').modal('show');
                        $('#errorMessageModal #errors').html('Something went wrong!');
                    
                ,
                error: function () 
                    $('#errorMessageModal').modal('show');
                    $('#errorMessageModal #errors').html('Something went wrong!');
                
            );
        
        return false;
    

 <div id="message_write_box" class="message-write">
   <form id="form-message-write">
     <input type="hidden" name="user_id" value=" $friend->id ">
       @if ($can_send_message)

        <textarea id="personal_message" class="form-control" rows="1" placeholder="Your message.." onkeyup="sendMessage(event)"></textarea>

       @else

        <div class="alert alert-danter">You must follow each other to send messages!</div>
      @endif
   </form>
 </div>

大家好，我一直在尝试使用这段代码，而 javascript 对我来说是一个新世界。谁能帮我理解如何将此 onkeyup 转换为 onclick 事件？感谢您的任何帮助！我只需要帮助来了解缺少什么？也许我需要添加一个事件监听器？我尝试了一些不同的东西，但我无法让按钮起作用。我确定解决方案很简单，我只需要获取 textarea 中的文本并应用一个按钮来发送用户输入。

尝试过按钮，尝试过输入字段，尝试过事件监听器，但我仍然明显做错了什么。

整个函数就像onkeyup一样完美运行。

【参考方案1】：

首先，将按钮元素添加到 HTML。对于这个按钮，要么使用 sendMessage(event) 函数添加 onclick 属性，要么添加事件侦听器并将其附加到该按钮并在侦听器中调用 sendMessage(event) 函数。

其次，您需要删除检查按键（向上）的“if (e.which == 13 && !e.shiftKey) ”条件。由于您想在单击时触发 sendMessage 功能，因此您可能根本不需要此条件，因此您可以将其删除。其余代码应该可以正常工作。

【讨论】：

感谢您的回复。我在表单中添加了一个带有 onclick="sendMessage(event)" 的按钮，我删除了 'if (e.which == 13 && !e.shiftKey)'条件，但单击按钮时仍然没有任何反应。

消息，值可能有问题。您正在检查非零长度。看看在单击的那一刻，该值是否不为空、null 或未定义。您可以添加日志以打印消息以确保此检查通过。