为何模拟粘贴事件在部分网站失效？寻求通用insertText方案

针对input、textarea、contenteditable（包括Draft.js这类自定义编辑器）的通用文本插入函数，核心思路是根据元素类型选择适配的API，同时兼顾兼容性：

function insertText(targetElement, textToInsert) {
  // 确保目标元素可编辑
  if (!targetElement || !targetElement.isContentEditable && !['INPUT', 'TEXTAREA'].includes(targetElement.tagName)) {
    throw new Error('目标元素不是可编辑字段');
  }

  // 处理原生input/textarea
  if (['INPUT', 'TEXTAREA'].includes(targetElement.tagName)) {
    const start = targetElement.selectionStart;
    const end = targetElement.selectionEnd;
    const value = targetElement.value;
    
    // 替换选中内容，插入文本
    targetElement.value = value.substring(0, start) + textToInsert + value.substring(end);
    
    // 调整光标到插入文本之后
    targetElement.selectionStart = targetElement.selectionEnd = start + textToInsert.length;
    
    // 触发input事件，通知编辑器更新
    targetElement.dispatchEvent(new Event('input', { bubbles: true }));
    return;
  }

  // 处理contenteditable元素（包括Draft.js）
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  range.deleteContents(); // 删除选中内容

  // 创建文本节点并插入
  const textNode = document.createTextNode(textToInsert);
  range.insertNode(textNode);

  // 将光标移动到插入文本的末尾
  range.setStartAfter(textNode);
  range.setEndAfter(textNode);
  selection.removeAllRanges();
  selection.addRange(range);

  // 触发input事件，兼容自定义编辑器（如Draft.js）
  targetElement.dispatchEvent(new Event('input', { bubbles: true }));
}

关键细节说明 #

• 原生输入框处理：直接操作selectionStart/selectionEnd修改值，这是最可靠的方式，不会触发异常。
• contenteditable处理：使用原生Selection/Range API操作DOM，避免document.execCommand的兼容性问题，同时插入后调整光标位置，保证编辑体验一致。
• 事件触发：插入文本后派发input事件，确保Draft.js这类依赖事件更新状态的编辑器能同步内容。
• 兼容性：覆盖了绝大多数现代浏览器，包括Chrome、Firefox、Safari，以及主流自定义编辑器框架。

补充：模拟粘贴的兼容优化 #

如果遇到部分自定义编辑器仅响应粘贴事件的情况，可以在contenteditable分支中增加模拟粘贴的降级逻辑：

// 在contenteditable处理分支中，可添加降级逻辑
try {
  // 先尝试Range API方式
  // ... 上述Range API代码 ...
} catch (e) {
  // 降级到模拟粘贴
  const dataTransfer = new DataTransfer();
  dataTransfer.setData('text/plain', textToInsert);
  targetElement.dispatchEvent(new ClipboardEvent('paste', {
    clipboardData: dataTransfer,
    bubbles: true,
    cancelable: true,
    composed: true // 跨Shadow DOM触发事件，适配部分封装编辑器
  }));
}

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