替代document.execCommand实现contenteditable元素粘贴纯文本方案咨询

你可以通过Selection和Range API来替换document.execCommand("insertText")，这两个是现代浏览器原生支持的标准API，完全替代废弃方法的同时，还能保证功能一致。以下是修改后的完整代码：

document.body.addEventListener("paste", function (e) {
    const pasteElements = ['SPAN', 'DIV', 'BR'];
    if (pasteElements.includes(e.target.nodeName)) {
        e.preventDefault();
        const text = e.clipboardData.getData('text/plain').trim();
        
        // 获取当前选区/光标对象
        const selection = window.getSelection();
        if (!selection.rangeCount) return;
        
        // 获取光标所在的范围
        const range = selection.getRangeAt(0);
        // 清除选区原有内容（如果用户选中了文本）
        range.deleteContents();
        // 创建纯文本节点
        const textNode = document.createTextNode(text);
        // 把文本插入到光标/选区位置
        range.insertNode(textNode);
        
        // 将光标移动到插入文本的末尾，保证后续输入正常
        range.setStartAfter(textNode);
        range.setEndAfter(textNode);
        selection.removeAllRanges();
        selection.addRange(range);
    }
});

关键逻辑说明 #

• 保留原有的e.preventDefault()阻止默认粘贴行为，避免富文本格式被插入
• 用window.getSelection()获取当前用户的光标或选区位置，这是操作可编辑元素的标准方式
• 通过Range对象的deleteContents()清除选中的内容（如果用户选中一段文本后粘贴）
• 创建纯文本节点插入，确保内容无格式，完全符合你的纯文本需求
• 最后调整光标位置到文本末尾，避免粘贴后光标错位的问题

这个方案完全兼容你用contenteditable实现自动增高文本框的场景，功能和原代码一致，但使用的是未废弃的现代API。

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