contentEditable div 即时替换innerHTML答案

【问题标题】：contentEditable div replace innerHTML on the flycontentEditable div 即时替换innerHTML
【发布时间】：2011-11-16 04:44:17
【问题描述】：

有没有办法（Rangy 库除外）即时更改 contentEditable Div InnerHTML，比如在 keyup 上，没有光标位置/焦点丢失？我想使用纯 javascript 代码，尽可能简单。

例如：

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

然后是javascript：

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

谢谢。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这不使用 keyup 事件，但也许就足够了？请注意，这适用于您显然可以只针对某个元素的主体。

document.body.contentEditable='true';
document.designMode='on';
void 0;

【讨论】：