Javascript 将插入符号放回更改contenteditable元素的innerHTML后的位置

我需要在每次击键后用JavaScript更新contenteditable p元素的innerHTML

（没有jQuery）

我不能用输入或文本区域代替p元素

它工作得很好，但是当innerHTML被重置时，插入符号总是回到段落的开头

我试图使用其他SO问题的解决方案来讨论插入符号和内容可编辑，但在我的案例中似乎不起作用：我想将插入符号放回innerHTML更新之前的位置

p.oninput=function（）{
//获得插入符号位置
c=window.getSelection（）。
getRangeAt（0）。
startOffset；
控制台日志（c）；
//更新innerHTML
p、 innerHTML=p.innerHTML.toUpperCase（）；
//放回插入符号
// ???
}

p{边框：1px点红色}

---

在此处键入

请考虑避开该问题

解决方案1：在完成键入之前不要转换为大写

解决方案2：将p设置为单间距字体。使P透明。将div放在后面，更新值为大写。不知道如何显示插入符号

记得一年前看到过一篇文章，其中一个编码接口使用类似的方法在文本区域中使用彩色编码。

我补充道

const range = window.getSelection();
range.selectAllChildren(p);
range.collapseToEnd();

这似乎解决了问题

p.oninput=function（）{
//获得插入符号位置
c=window.getSelection（）。
getRangeAt（0）。
startOffset；
控制台日志（c）；
//更新innerHTML
p、 innerHTML=p.innerHTML.toUpperCase（）；
const range=window.getSelection（）；
范围。选择所有儿童（p）；
range.collapseToEnd（）；
}

p{边框：1px点红色}

---

在此处键入

请参见Hi中的类似答案，感谢您的这些想法，然而我的转换不仅仅是为了解决问题。我将其简化为示例。我确实需要创建一种编码接口，但是在p（或pre）元素内部，而不是文本区域，我的问题只是插入符号的位置。有很多类似于这个主题的答案。我在你的答案中添加了一段代码。请编辑它，以便我们可以实际看到您所做的操作。如果您在非结尾的任何位置编辑文本，则此操作无效