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的元素，之後通過ID檢索它們並使用這些元素移動選擇邊界。這是最穩健的方法，也是Rangy所做的。
2. 在HTML替換之前存儲某種基於字符的偏移量，並在之後重新創建選擇。這在一般情況下有各種問題，但可能足夠好，取決於您的需求。我有posted functions on SO to do this before，這取決於Rangy，但如果你不介意丟失對IE的支持，你可以輕鬆地去掉Rangy的東西。
3. 按像素座標存儲和恢復選擇邊界。瀏覽器對此的支持並不好，如果您的HTML替換版本更改了佈局，則不適合。

Answer 2

這不使用keyup事件，但它可能就足夠了？請注意，適用於身體，你顯然可以只針對某個元素。

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