如何清除role="textbox"的contenteditable span输入框粘贴时的残留HTML与样式？

核心思路是完全接管contenteditable元素的粘贴事件，阻止浏览器默认的富文本解析流程，仅从剪贴板中提取纯文本插入到光标位置，就能实现和Facebook评论输入框一致的无格式粘贴效果，不会出现多余的DOM嵌套、内联样式残留问题。

具体实现 #

• 原有HTML结构无需修改，保持现有定义：
  <span class="input__textarea input__textarea__msg" role="textbox" contenteditable></span>
• 新增paste事件拦截逻辑：

  const editableBox = document.querySelector('.input__textarea__msg');
  editableBox.addEventListener('paste', (event) => {
    // 阻断浏览器默认的富文本粘贴行为
    event.preventDefault();
    // 仅提取剪贴板中的纯文本内容
    const plainContent = event.clipboardData.getData('text/plain');
    // 定位当前光标位置的选中范围
    const selection = window.getSelection();
    if (!selection.rangeCount) return;
    // 移除光标选中的原有内容
    selection.deleteFromDocument();
    // 插入纯文本节点，不会触发任何HTML标签解析
    selection.getRangeAt(0).insertNode(document.createTextNode(plainContent));
    // 触发输入框高度自动重算，适配粘贴后的内容长度
    editableBox.style.height = 'auto';
    editableBox.style.height = `${editableBox.scrollHeight}px`;
  })
  

• 补充SCSS兜底规则，避免极端场景下的样式污染：
  将现有SCSS中的子元素样式规则替换为全局重置逻辑：

  &__msg[contenteditable] * {
    // 重置所有子元素的自带样式、内联样式
    all: unset;
    // 统一继承输入框本身的字体配置
    font: inherit;
  }
  

注意事项 #

• 该方案兼容所有现代浏览器，不需要引入额外依赖
• 粘贴时会完整保留文本内的换行、空格等基础排版，不会丢失原生文本结构
• 不需要给元素额外添加role="presentation"属性，原有的无障碍角色配置可以保留

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