如何为contentEditable div设置内容？模拟Twitch聊天输入需求

针对Twitch这类使用contentEditable div作为聊天输入框的场景，无法直接套用input元素的value set方法，可通过以下方式实现程序化输入：

方法一：直接修改内容并触发事件 #

1. 定位聊天框元素
   Twitch的聊天输入框通常是带有contenteditable="true"属性的div，可通过属性或类名定位：

const chatInput = document.querySelector('[contenteditable="true"].chat-input__textarea');

2. 设置输入内容
   直接修改元素的textContent（纯文本）或innerHTML（带格式内容）：

chatInput.textContent = "你要发送的消息内容";

3. 触发输入事件
   手动触发input事件，让Twitch前端监听器识别内容变化：

chatInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));

方法二：模拟真实输入动作 #

使用document.execCommand（虽已废弃但仍兼容）模拟用户手动输入，会自动触发相关事件：

const chatInput = document.querySelector('[contenteditable="true"].chat-input__textarea');
chatInput.focus(); // 先聚焦输入框
document.execCommand('insertText', false, "模拟输入的消息");

补充：模拟发送消息 #

完成输入后，若要触发发送，可模拟回车键事件：

const enterKeyEvent = new KeyboardEvent('keydown', {
  key: 'Enter',
  code: 'Enter',
  bubbles: true,
  cancelable: true
});
chatInput.dispatchEvent(enterKeyEvent);

注意：若Twitch更新前端结构或事件监听逻辑，可通过浏览器开发者工具查看聊天框绑定的事件，针对性触发对应事件。

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