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之前,为选择的开始和结束存储某种基于字符的偏移量,然后重新创建选择.这在一般情况下会出现各种问题,但可能会很好,具体取决于您的需求.我之前在SO上发布了函数来依赖Rangy,但如果你不介意失去对IE <9的支持,你可以很容易地删除Rangy的东西.
3. 按像素坐标存储和恢复选择边界.浏览器对此的支持并不好,如果您的HTML替换更改了布局,则不适用.