如何将contenteditable元素内的光标移动到新增p.taskPara元素末尾

原代码错误点 #

1. 新Range绑定的目标元素错误，不应取nodeParent.firstChild，需直接绑定你刚创建插入的ele（也就是新增的.taskPara元素）
2. 原有逻辑是选中整个p标签的文本内容，不是将光标移动到内容末尾
3. 旧Range对象的rng.collapse(true)调用属于多余逻辑，无实际作用

修改后的光标移动代码 #

把原问题标注的PROBLEM CODE部分全部替换为以下代码即可：

// Move the caret immediately after the inserted DOM
const newRng = new Range();
// 选中新增p元素的全部内容
newRng.selectNodeContents(ele);
// 将选区折叠到内容末尾
newRng.collapse(false);
selection.removeAllRanges();
selection.addRange(newRng);

逻辑说明 #

selectNodeContents(ele)会获取你刚插入的p标签的所有内容，collapse(false)表示把光标定位到选区的结束位置，刚好符合输入后光标跟随在新增文本后的交互需求。

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