Contenteditable中创建Span并自动聚焦、换行的功能问题求助

针对你遇到的三个核心问题，根源在于光标定位逻辑错误、元素插入位置偏差，以及未正确识别当前操作的span元素，以下是针对性修正方案：

核心问题修复点 #

• 光标无法移至下一行：原代码仅设置了range起始位置，未同步设置结束位置；且br元素错误追加到容器末尾，应放在当前span后方。
• 输入内容未进入新span：空span缺少文本节点支撑，直接定位光标到span元素上会导致输入偏移，需基于span内的空文本节点定位光标。
• 无法在非最后span的句末操作：原代码默认将新元素追加到容器末尾，需先找到光标所在的目标span，在其后方插入新元素。

修正后的代码 #

public addOwnBehaviorToContentEditable(event: KeyboardEvent) {
    if (event.key !== 'Enter') return;
    event.preventDefault();

    const contenteditable = event.target as HTMLElement;
    const selection = this._document.getSelection();
    if (!selection || selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    // 追溯找到当前光标所在的span元素
    let currentSpan: HTMLElement | null = null;
    let node = range.commonAncestorContainer;
    // 若当前节点是文本节点，取其父元素判断是否为span
    if (node.nodeType === Node.TEXT_NODE) {
        node = node.parentNode;
    }
    if (node instanceof HTMLElement && node.tagName === 'SPAN') {
        currentSpan = node;
    }
    // 验证光标是否处于span内容的末尾
    const isAtSpanEnd = range.endOffset === (range.endContainer as Text).length;
    if (currentSpan && isAtSpanEnd) {
        // 在当前span后方插入换行符
        const br = this._document.createElement('br');
        currentSpan.after(br);
        
        // 创建新span并配置属性
        const newSpan = this._document.createElement('span');
        newSpan.textContent = ''; // 自动生成空文本节点
        this.assignPropertiesToSpan(newSpan);
        br.after(newSpan);

        // 将光标精准定位到新span的空文本节点内
        const newRange = this._document.createRange();
        const textNode = newSpan.firstChild as Text;
        newRange.setStart(textNode, 0);
        newRange.setEnd(textNode, 0);
        
        selection.removeAllRanges();
        selection.addRange(newRange);
    } else {
        // 非句末回车，保持原有插入换行的逻辑
        range.insertNode(this._document.createElement('br'));
    }
}

关键修改说明 #

1. 精准识别操作span：通过commonAncestorContainer向上追溯，确保找到光标实际所在的span元素，解决跨span操作的问题。
2. 元素插入位置修正：使用after()方法在当前span后方插入br和新span，而非追加到容器末尾，保证元素层级符合要求。
3. 光标定位优化：基于新span内的空文本节点设置range的起始和结束位置，确保光标落在span内部，输入内容会直接归属该span。
4. 增加空值校验：对selection等对象增加空值判断，避免潜在的运行时错误。

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