如何向textarea元素派发input事件并传递文本？

问题出在你搞反了逻辑：input事件只是用来通知页面“输入框内容已变化”，它本身不负责传递文本内容。直接触发事件却不修改textarea的value，反而可能触发页面上的监听逻辑导致内容被清空。

正确的做法是先修改textarea的内容，再触发input事件：

• 直接修改textarea的value属性（支持覆盖原有内容或追加内容）
• 触发input事件时，注意bubbles参数要传布尔值true，而非字符串'true'

代码示例 #

// 获取目标textarea元素
const textarea = document.querySelector('textarea');

// 方案1：覆盖原有内容，设置指定文本
textarea.value = '需要输入的指定文本';

// 方案2：在原有内容基础上追加文本
// textarea.value += ' 追加的新内容';

// 正确触发input事件
textarea.dispatchEvent(new Event('input', { bubbles: true }));

如果你的场景需要完全模拟用户逐字输入的行为，可以配合光标位置操作实现，示例如下：

const textarea = document.querySelector('textarea');
const newText = '逐字输入的内容';

// 逐字插入模拟用户输入
newText.split('').forEach((char, index) => {
  setTimeout(() => {
    // 在当前光标位置插入字符
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    textarea.value = textarea.value.substring(0, start) + char + textarea.value.substring(end);
    // 将光标移动到插入后的位置
    textarea.setSelectionRange(start + 1, start + 1);
    // 触发input事件
    textarea.dispatchEvent(new Event('input', { bubbles: true }));
  }, index * 100); // 模拟输入间隔
});

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