Question

这是Microsoft Edge浏览器特定的问题。我正在尝试使用Range API将CSS样式附加到所选单词。当我尝试公开功能range.endOffset时，边缘浏览器存在问题。在这里，我附上我的代码。

  <!DOCTYPE html>
  <html>
  <body>
  <p>This is sample content</p>
  <p id="demo"></p>

  <script>
  var range = null;
  var selection = window.getSelection();
  if( selection && selection.rangeCount > 0 ) 
  {
       range = selection.getRangeAt( 0 );
  }

  var startOffset = range.startOffset;
  var endOffset = range.endOffset;

 document.getElementById("demo").innerHTML =
 startOffset + "<br>" + endOffset; 
 </script>

 </body>
 </html>

现在，如果我尝试从“ P”标签中选择文本“内容”，它会为range.startOffset提供正确的值，但会给range.endOffset值提供不正确的值。这将导致样式混乱到整个“ P”标签。仅在Microsoft Edge浏览器中会发生此问题，并且如果所选文本以某些html标记结尾（如此处），则以“内容”文本结尾。如果尝试在文本之间选择文本，则不会发生此问题。它可以在Chrome浏览器中使用。有什么解决方法可以在边缘浏览器中解决此问题？

Answer 1

您的Edge浏览器版本是什么？我在Edge 42和Edge 44版本上使用以下代码重现了您的问题。

<p>This is sample content</p>
<p id="demo"></p>

<script>
    document.getElementsByTagName('p')[0].onmouseup = function () {
        var range = null;
        var selection = window.getSelection();
        if (selection && selection.rangeCount > 0) {
            range = selection.getRangeAt(0);
        }

        var startOffset = range.startOffset;
        var endOffset = range.endOffset;

        document.getElementById("demo").innerHTML =
            startOffset + "<br>" + endOffset;
    }
</script>

在Edge 42版本中，如果我选择“内容”，则endOffset将为1。

在Edge 44版本中，如果我拖动以选择“内容”，则endOffset效果很好，但是如果我使用双击方法选择“内容”，endOffset仍为1。

因此，此问题与Edge浏览器有关，我已将此问题反馈给Edge Platform。

作为一种解决方法，我建议您可以根据startOffset和所选文本来计算endOffset。尝试使用以下代码：

<p>This is sample content</p>
<p id="demo"></p>

<script>
    document.getElementsByTagName('p')[0].onmouseup = function () {
        var range = null;
        var selection = window.getSelection();
        if (selection && selection.rangeCount > 0) {
            range = selection.getRangeAt(0);
        }

        var startOffset = range.startOffset;
        var endOffset = startOffset + selection.toString().length;

        document.getElementById("demo").innerHTML =
            startOffset + "<br>" + endOffset + "<br/>" + selection;
    }
</script>

以下截图：

Microsoft Edge浏览器中的range.endOffset给出错误的值

1 个答案: