Vue中如何将光标从contenteditable父div转移至新建的子p节点

我明白你遇到的困扰了——直接调用focus()或者click()确实经常搞不定contenteditable元素的光标定位，尤其是刚创建的空段落。这是因为仅仅让元素获得焦点还不够，我们需要手动通过Range和Selection API来明确设置光标的位置。

试试下面的修改方案，在创建并添加新段落之后，加入光标定位的逻辑：

const newParagraph = document.createElement('p');
newParagraph.className='d-block paragraph';
newParagraph.setAttribute('contenteditable', 'true');
newParagraph.innerText = '';
const editorContainer = editorContainerRef.value as HTMLDivElement;
editorContainer.appendChild(newParagraph);

// 核心：手动设置光标到新段落的起始位置
newParagraph.focus();
const range = document.createRange();
const selection = window.getSelection();

// 选中新段落的所有内容（这里是空的）
range.selectNodeContents(newParagraph);
// 折叠光标到内容的起始位置（true是开头，false是结尾）
range.collapse(true);

// 更新当前选择区域，让光标生效
selection?.removeAllRanges();
selection?.addRange(range);

为什么这个方法有效？ #

• newParagraph.focus()：先让段落元素获得焦点，确保它成为当前活跃的可编辑元素
• Range和Selection API：这是浏览器控制文本选择和光标的底层接口，通过创建Range并将光标折叠到段落的起始位置，再把这个Range添加到当前选择中，就能精准把光标定位到新段落里了

另外需要注意：确保你的父div和子p的contenteditable属性设置没有冲突——父div设为contenteditable="true"，子p也设为contenteditable="true"是允许的，子元素会成为独立的可编辑单元，不会被父元素的编辑状态干扰。

如果之后你需要把光标定位到段落末尾，只需要把range.collapse(true)改成range.collapse(false)就可以了。

备注：内容来源于stack exchange，提问作者amachree tamunoemi