解决contenteditable过滤后光标回退问题，对齐input光标行为

这个问题我之前做富文本输入组件时也踩过坑！contenteditable的光标管理确实比原生input麻烦太多——你直接修改textContent的时候，浏览器会重新渲染整个元素，光标自然就被打回起始位置了，而input的value更新是浏览器原生处理的，所以能自动维持光标位置。

下面给你一套针对纯文本contenteditable的解决方案，核心思路就是先存光标位置，再改内容，最后恢复光标，还要考虑过滤内容后的位置调整：

步骤1：封装光标位置的获取与设置函数 #

因为contenteditable的光标是基于Range对象的，我们需要把它转换成相对于文本内容的偏移量，方便后续计算：

// 获取当前光标在文本中的偏移量（从开头到光标处的字符数）
function getCaretOffset(element) {
    let offset = 0;
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        const preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        offset = preCaretRange.toString().length;
    }
    return offset;
}

// 根据偏移量设置光标位置
function setCaretOffset(element, offset) {
    const selection = window.getSelection();
    // 确保元素有文本节点（如果是空的，先创建一个）
    if (!element.firstChild) {
        element.appendChild(document.createTextNode(''));
    }
    const range = document.createRange();
    range.setStart(element.firstChild, offset);
    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);
}

步骤2：处理input事件，保存-过滤-恢复光标 #

给你的contenteditable元素绑定input事件，按顺序执行操作：

const editableEl = document.getElementById('test1');

editableEl.addEventListener('input', function() {
    // 1. 先保存当前光标位置
    const originalCaretPos = getCaretOffset(this);
    const originalText = this.textContent;
    
    // 2. 执行你的过滤逻辑：只保留数字
    const filteredText = originalText.replace(/[^0-9]/g, '');
    
    // 3. 只有内容变化时才更新，避免不必要的渲染
    if (filteredText !== originalText) {
        this.textContent = filteredText;
        
        // 4. 调整光标位置：因为过滤掉了非数字字符，要计算实际应该停留的位置
        // 比如原文本是"12a3"，光标在a后面（偏移量3），过滤后是"123"，光标应该还是偏移量3
        // 计算原文本和过滤后文本的长度差，修正光标位置
        const charRemovedCount = originalText.length - filteredText.length;
        let newCaretPos = originalCaretPos - charRemovedCount;
        
        // 确保光标不会超出文本范围（比如过滤后文本为空时，光标设为0）
        newCaretPos = Math.max(0, Math.min(newCaretPos, filteredText.length));
        
        // 5. 恢复光标位置
        setCaretOffset(this, newCaretPos);
    }
});

注意事项 #

• 上面的代码适用于纯文本类型的contenteditable元素，如果你的元素里有子节点（比如<span>、<br>），需要更复杂的光标计算逻辑（要遍历所有文本节点累加偏移量）。
• 测试时要覆盖各种场景：在开头/中间/末尾输入非数字、删除字符、连续输入混合内容等，确保光标行为和input一致。
• 如果需要支持粘贴操作，还要额外监听paste事件，先阻止默认行为，再获取粘贴内容过滤后插入，同时维护光标位置。

这样处理后，你的contenteditable元素就能和input一样，过滤内容时光标保持在原来的位置啦！

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