window.getSelection(） 返回意外的值

window.getSelection() returns unexpected values

本文关键字：意外 返回 getSelection window      更新时间：2023-09-26

我正在使用带有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.getSelect 返回不连贯的选定文本开始和结束位置？

无需使其复杂化。如果您支持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 <b>bold</b> "。

第二次，它从<b>标签中计算位置。所以，它的 0-3 和文本将是"<b>Make<b/> text bold"。

第三次，它从</b>标签中计算位置。因此，其 6-9 和结果文本将是" Make t<b>ext </b>bold "。

第四次，它从</b>标签中计算位置。所以，它又是0-3。因此，0-3 和 6-9 模式将一次又一次地重复。

相关文章：