如何使可编辑div为空时，输入内容自动写入内部的可编辑span元素？

我完全懂你的需求啦——当外层的可编辑div是空状态时，点击它输入内容，希望所有输入都自动落到内部的可编辑span里，而不是变成div的直接文本节点。你之前的代码问题出在光标位置的设置上，咱们来调整一下就能解决：

问题根源 #

你原来的range.setStartAfter(node)是把光标放在了span元素的后面，所以输入的内容自然会成为div的子节点，而不是span的内容。咱们需要把光标直接定位到span元素的内部起始位置。

修改后的基础实现代码 #

先调整你的setCaret函数，同时加个判断：只有当div确实为空时才强制定位光标，避免干扰用户已经在span里编辑内容的场景：

function setCaret() {
    const spanElement = document.getElementById("first");
    const divElement = document.getElementById("input");
    if (!spanElement || !divElement) return;

    // 检查div是否真的为空（过滤掉空白文本节点）
    const isDivEmpty = Array.from(divElement.childNodes).every(node => {
        return node.nodeType === Node.TEXT_NODE && node.textContent?.trim() === "" || node === spanElement;
    });

    if (!isDivEmpty) return; // 如果div已有有效内容，不强制修改光标位置

    const range = document.createRange();
    const sel = window.getSelection();

    // 将光标定位到span内部的起始位置
    range.setStart(spanElement, 0);
    range.collapse(true);

    sel.removeAllRanges();
    sel.addRange(range);
    divElement.focus();
}

然后记得给div绑定focus和click事件（避免用户点击空白区域但div已获焦时不触发）：

<div id="input" contenteditable="true" onclick="setCaret()" onfocus="setCaret()">
    <span contenteditable="true" id="first"></span>
</div>

针对Angular场景的优化 #

考虑到你用Angular开发，更推荐用@ViewChild获取元素，而非直接操作DOM查询，这样更符合组件化思路，也能避免手动DOM操作带来的问题：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-text-editor',
  template: `
    <div #editableDiv contenteditable="true" (click)="setCaret()" (focus)="setCaret()">
      <span #editableSpan contenteditable="true"></span>
    </div>
  `
})
export class TextEditorComponent {
  @ViewChild('editableDiv') editableDiv!: ElementRef<HTMLDivElement>;
  @ViewChild('editableSpan') editableSpan!: ElementRef<HTMLSpanElement>;

  setCaret() {
    const divElement = this.editableDiv.nativeElement;
    const spanElement = this.editableSpan.nativeElement;

    // 检查div是否为空
    const isDivEmpty = Array.from(divElement.childNodes).every(node => {
      return node.nodeType === Node.TEXT_NODE && node.textContent?.trim() === "" || node === spanElement;
    });

    if (!isDivEmpty) return;

    const range = document.createRange();
    const sel = window.getSelection();

    range.setStart(spanElement, 0);
    range.collapse(true);

    sel.removeAllRanges();
    sel.addRange(range);
    divElement.focus();
  }
}

这样调整后，当你点击空的div时，光标会自动落到span内部，输入的内容就会直接进入span，完全不需要手动修改DOM结构，完美适配你用属性绑定管理元素数组的需求~

备注：内容来源于stack exchange，提问作者Kartik Watwani