Question

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

（没有jQuery）

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

它工作正常，但是当重置innerHTML时，插入符号总是返回到段落的开头。

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

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作为大写。不知道怎么显示插入符号？？

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

Answer 2

我添加了

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

代码，似乎解决了问题。

＆＃13;

p.oninput=function(){

  // Get caret position
  c = window.getSelection().
      getRangeAt(0).
      startOffset;
  console.log(c);

  // Update innerHTML
  p.innerHTML = p.innerHTML.toUpperCase();

  const range = window.getSelection();
  range.selectAllChildren(p);
  range.collapseToEnd();
}

＆＃13;

p{ border: 1px dotted red }

＆＃13;

<p contenteditable id=p>type here

＆＃13;

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

2 个答案: