contentEditable div即時替換innerHTML

Question

是否有一種方法（Rangy庫除外）可以像在鍵盤輸入時那樣動態更改contentEditable Div InnerHTML，而不會丟失光標位置/焦點？ 我想使用盡可能簡單的純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替代品更改了布局，則瀏覽器將不適合。

Answer 2

這不使用keyup事件，但可能就足夠了？ 請注意，適用於身體的對象顯然可以僅針對特定元素。

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