更改contenteditable元素的innerHTML后，将光标放回原来的位置

Question

我需要在 JavaScript 中的 contenteditable P 元素中每次按键后更新其 innerHTML，不能使用 input 或 textarea 替代 P 元素，并且无法使用 jQuery。尽管它能正常工作，但是当 innerHTML 重置时，光标始终会回到段落开头。我尝试使用其他 SO 问题提供的有关光标和 contenteditable 的解决方案，但似乎在我的情况下无法正常工作：我想把光标放回到更新 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上运行，但如果您有跨浏览器的解决方案，我也可以接受。

感谢您的帮助！

- xem

---

请将光标移动到contenteditable实体的末尾。 - Ruskin

https://dev59.com/CGYr5IYBdhLWcg3wG2pI#13950376 - Tim Down

Answer 1

你想晚到派对多久？ “是的”

如果有人仍在寻找解决方案，也许这个对你有用？

p.oninput=function(){

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

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

  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(p.childNodes[0], c);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
}

p{ border: 1px dotted red }

<p contenteditable id=p>type here

- pewpewlasers

Answer 2

考虑暂时离开这个问题。

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

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

记得一年左右前看到一篇文章，其中编码界面使用类似的方法在文本区域中具有彩色编码。

- Ruskin

---

嗨，感谢这些想法，但是我的转换不仅仅是将字符串转为大写。我为了举例简化了它。我确实需要创建一种编码接口，但是它需要在 p（或 pre）元素内部，而不是 textarea 中，并且我的问题只是插入符位置。 - xem

看看CodePen和JSFiddle是如何做到的。还有很多像这个主题的StackOverflow答案。 - Ruskin

Answer 3

我添加了

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

回到你的代码，看起来解决了这个问题。

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();
}

p{ border: 1px dotted red }

<p contenteditable id=p>type here

- syc

---

我已经在你的回答中添加了一段代码片段。请编辑它，以便我们可以看到你所做的。 - Zze

如果您正在编辑文本的任何位置而不是在末尾，则此方法无效。 - Caltrop