点击onclick事件后textarea内容无法清空的技术求助

我触发onclick事件后想清空textarea字段，但一直没成功。已经查过Stack Overflow的相关问题，还是没解决。

我的JS脚本加载方式：

<script src="/client.js" defer></script>

HTML代码：

<textarea class="form-control emojionearea-form-control" id="messageInput" rows="1" placeholder="Type your message here..."></textarea>

<div onclick="HandleSentMessage()" class="btn btn-primary btn-icon send-icon rounded-circle text-light mb-1" role="button"></div>

client.js代码：

let HandleSentMessage = ()=>{
    console.log("clicked")
    // ...其他代码
    if (Inputmessage.length > 1) {
        container.appendChild(message);
        message.scrollIntoView({ behavior: 'smooth', block: 'end' });
        let text = document.getElementById('messageInput'); 
        text.value = "";
    } else {
        console.log("Container element not found");
    }
}

点击按钮后，新消息已成功追加到容器中，但textarea内容始终无法清空。

解决方案 #

问题根源是你用了emojionearea-form-control类，说明这个textarea已经被EmojiOneArea插件包装：原生textarea会被插件隐藏，页面显示的是插件生成的模拟输入框。直接修改原生textarea的value不会同步到插件的输入框，所以看起来没清空。

解决方法：使用EmojiOneArea官方提供的API来操作：

1. 如果你用了jQuery：

let HandleSentMessage = ()=>{
    console.log("clicked")
    // ...其他代码
    if (Inputmessage.length > 1) {
        container.appendChild(message);
        message.scrollIntoView({ behavior: 'smooth', block: 'end' });
        // 获取EmojiOneArea实例并清空
        const emojioneArea = $('#messageInput').data('emojioneArea');
        emojioneArea.setText('');
    } else {
        console.log("Container element not found");
    }
}

2. 原生JS写法：

let HandleSentMessage = ()=>{
    console.log("clicked")
    // ...其他代码
    if (Inputmessage.length > 1) {
        container.appendChild(message);
        message.scrollIntoView({ behavior: 'smooth', block: 'end' });
        // 获取EmojiOneArea实例并清空
        const textarea = document.getElementById('messageInput');
        const emojioneArea = textarea.emojioneArea;
        emojioneArea.setText('');
    } else {
        console.log("Container element not found");
    }
}

另外注意：你的Inputmessage变量如果是从原生textarea取的值，建议改成从EmojiOneArea实例获取，避免取值和清空操作不同步的问题。

内容的提问来源于stack exchange，提问作者boyenec