在更改了一个可信元素的innerHTML后,将插入符放回原位

Question

我需要在JavaScript中每次击键后更新一个可信的P元素的innerHTML

(没有jQuery)

我不能使用输入或textarea而不是P元素.

它工作正常,但是当重置innerHTML时,插入符号始终返回到段落的开头.

我尝试使用其他SO问题的解决方案来讨论插入符号和满足,但它似乎在我的情况下不起作用:我想在更新innerHTML之前将插入符号准确地放回原处.

p.oninput=function(){

  // Get caret position
  c = window.getSelection().
      getRangeAt(0).
      startOffset;
  console.log(c);

  // Update innerHTML
  p.innerHTML = p.innerHTML.toUpperCase();

  // Place caret back
  // ???
}

p{ border: 1px dotted red }

<p contenteditable id=p>type here

顺便说一句,它不需要在IE上工作,但如果你有一个跨浏览器的解决方案,我也会接受它.

谢谢你的帮助!

Answer 1

考虑摆脱这个问题。

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

解决方案2：将P设置为等宽字体。将 P 设为透明。将 div 放在更新值后面，并将值设置为大写。不确定如何显示插入符...？

记得大约一年前看到过一篇文章，其中编码界面使用类似的方法在文本区域中使用颜色编码代码。