window.getSelection（）返回意外值

Question

我正在使用具有contenteditable的div來創建文本編輯器。 我覺得我在第一個障礙中失敗了。

<html>
<head></head>
<body>
<input type="button" id="bold" value="B" />
<div id="wysiwyg" contenteditable="true" style="border:solid;width:500px;height:300px;"></div>

<script>
var bold = document.getElementById("bold");
var wysiwyg = document.getElementById("wysiwyg");

bold.addEventListener("click", function(){
    update("<b>", "</b>");
});    

function update(startTag, endTag){

//find the selected text
 var selected_text = "";
   if (window.getSelection) {
        selected_text = window.getSelection();
   } else if (document.getSelection) {
        selected_text = document.getSelection();
   } else if (document.selection) {
        selected_text = document.selection.createRange().text; 
   }

   //user could have selected in reverse, so we need to make sure the values are in correct order
var startPos = selected_text.anchorOffset >= selected_text.focusOffset ? selected_text.focusOffset : selected_text.anchorOffset;
var endPos = selected_text.focusOffset <= selected_text.anchorOffset ? selected_text.anchorOffset : selected_text.focusOffset;

if (startPos == endPos) //There is no selection
    return;

var startText = wysiwyg.innerText.substr(0, startPos);
var textToWrap = wysiwyg.innerText.substr(startPos, endPos- startPos);
var endText = wysiwyg.innerText.substr(endPos);
wysiwyg.innerHTML = startText + startTag + textToWrap + endTag + endText;

}

</script>
</body>
</html>

如果要執行此代碼並在div中鍵入3個單詞，請選擇中間單詞（用鼠標突出顯示），然后單擊屏幕上的B按鈕（在HTML中），您會注意到該程序會按需執行，在它會使您突出顯示的單詞加粗。

如果現在選擇鍵入的3中的最后一個單詞，並嘗試使其變為粗體，您會注意到第一個單詞變為粗體。

看一下代碼，我可以看到問題是selected_text.anchorOffset最初返回正確的值，但是在隨后的請求中，它得到了錯誤的信息（或者至少提供了我不理解的值）。

此JSFIDDLE將演示該問題！

為什么window.getSelection返回錯誤的所選文本開始和結束位置？

Answer 1

無需使其復雜。 如果您支持IE8及更高版本中的任何瀏覽器，則可以使用execCommand函數。 更新后的代碼如下：

var bold = document.getElementById("bold");
var wysiwyg = document.getElementById("wysiwyg");

bold.addEventListener("click", function(){
    document.execCommand('bold');
});

要補充答案，如果您還沒有弄清楚為什么您的代碼不起作用。

首先，來自MDN的focusOffset或anchorOffset定義（兩者相似）：

“ Selection.focusOffset：Selection.focusOffset只讀屬性返回選擇焦點在Selection.focusNode中偏移的字符數。”

讓我們以文本為例：“將文本設為粗體”，然后每次都選擇“粗體”。

第一次，它將正確計數位置並使元素變為粗體。 因此，新文本看起來像“ Make text bold ”。

第二次，它從標簽計數位置。 因此，其0-3和文本將為“ Make text bold ”。

第三次，它從標簽計數位置。 因此，其6-9和結果文本將為“ Make text bold ”。

第四次，它從標簽計數位置。 因此，其再次為0-3。 因此，0-3和6-9模式將一次又一次重復。

window.getSelection（）返回意外值

問題描述

1 個解決方案

解決方案1
2 已采納 2016-02-09 17:01:33

window.getSelection（）返回意外值

問題描述

1 個解決方案

解決方案1 2 已采納 2016-02-09 17:01:33

解決方案1
2 已采納 2016-02-09 17:01:33