將光標移動到contentEditable DIV中的佔位符元素

Question

我有一個contentEditable DIV，當用戶按下某個鍵時，底層代碼將被處理並由更新後的代碼替換。唉，這會導致光標位置丟失。

但是，爲了保留光標位置，我在處理開始之前成功地將<span id="placeholder"></span>插入到DIV的正確位置。這保留了遊標的預期位置，但現在我似乎無法設置範圍來選擇它。

這是我目前有：

function focusOnPlaceholder() { 

    var placeholder = document.getElementById('placeholder'); 

    if(!placeholder) return; 

    var sel, range; 

    if (window.getSelection && document.createRange) {      
     range = document.createRange(); 
     range.selectNodeContents(placeholder); 
     range.collapse(true); 
     sel = window.getSelection(); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } else if (document.body.createTextRange) { 
     range = document.body.createTextRange(); 
     range.moveToElementText(placeholder); 
     range.select(); 
    } 

} 

任何幫助，將不勝感激，和一個跨瀏覽器的解決方案將是令人難以置信的:)

Answer 1

一個跨瀏覽器的解決方案是用我的Rangy庫特別是selection save/restore module，它使用了類似的佔位符技術並經過了充分測試。但是，如果不使用庫，可以通過在佔位符元素中放置一些內容（例如，非間斷空間（HTML中的\u00A0或 ））來解決此問題。您可能希望在選擇範圍後刪除focusOnPlaceholder()中的佔位符。