使用javascript使用createRange選擇文本和包含元素

Question

我正在滾動自己的通用所見即所得編輯器，但我堅持選擇一些文本。 我正在使用將contenteditable設置為true的div輸入文本。 問題是我正在使用<var>標記突出顯示一些用戶應該以自己的文字刪除並重寫的文本。 單擊<var>標記內的文本時，它會按我的預期突出顯示，但是當您按退格鍵時，只會刪除文本，而不是標記（ <var> ）。 我怎樣才能告訴選擇項在選擇項的每一端再抓幾個字符，以便它也刪除<var>標記？ 我正在使用以下內容進行選擇。

    var range = document.createRange();
    range.selectNodeContents(elem);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

Answer 1

將函數放在div的click事件上。

選擇<var>標簽。

使用.selectNode而不是.selectNodeContents 。

瀏覽器對它的處理方式不同。 當您輸入更多文本時，有些會添加<i></i>標記，有些則不會，但是會完全刪除<var>標記。...

 var myDiv = document.getElementById("myDiv"); var elem = document.getElementById("myVar"); myDiv.addEventListener("click", function() { var range = document.createRange(); range.selectNode(elem); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); }); 

 <div contenteditable="true" id="myDiv"> Hello, this<var id="myVar"> is a test</var> of the editor </div>