javascript - contentEditable div 即时替换 innerHTML

Question

有没有办法(Rangy 库除外)动态更改 contentEditable Div InnerHTML，就像在 keyup 上一样，没有光标位置/焦点丢失？我想使用纯 javascript 代码，尽可能简单。

例如:

<div id="divId" contentEditable="true" onkeyup="change(this)"></div>

然后是 javascript :

function change(element)
{
  element.innerHTML = element.innerHTML.replace(/.../, '...');
}

谢谢。

Answer 1

如果您要替换 HTML，您将需要一些方法来保存和恢复您的选择。选项是:

1. 在 HTML 替换之前在选择的开始和结束处插入带有 ID 的元素，之后通过 ID 检索它们并使用这些元素移动选择边界。这是最稳健的方法，也是 Rangy 所做的。
2. 在 HTML 替换之前为选择的开始和结束存储某种基于字符的偏移量，然后重新创建选择。这在一般情况下有各种各样的问题，但可能已经足够好了，具体取决于您的需要。我有 posted functions on SO to do this before这取决于 Rangy，但是如果您不介意失去对 IE < 9 的支持，您可以轻松地去掉 Rangy 的东西。
3. 按像素坐标存储和恢复选择边界。浏览器对此的支持不好，如果您的 HTML 替换更改了布局，将不适合。