Question

我正在尝试使用文档DOM中的getSelection函数来检索Edge上选择的元素/组件，但是我没有在anchorNode上获得任何值，而在对象的rangeCount属性上获得0回到。我也在Chrome上对此进行了测试，并且可以在那里正常运行，这就是为什么我知道Edge返回的值不正确的原因。

我需要知道是否有办法在Edge上获得正确的AnchorNode和RangeCount，或者是否有错误。另外，如果您知道一种解决方法，请让我知道。

我附加了两个图像，当指针焦点放在同一元素/组件中时，您可以看到document.getSelection()返回的对象在Chrome和Edge之间的区别。

在Chrome上调用document.getSelection时返回的选择对象

在Edge上调用document.getSelection时返回选择对象

-------------------------编辑（对于更实际的示例）-------------- -----------

为了给您提供一个更实际的示例，当它为空时，我尝试在StackOverflow的此处输入的主搜索栏上进行选择，并且它为我检索了Chrome和Edge之间的不同值（即使使用文本，它在Edge上也检索了null）。

在Chrome上，它返回anchorNode中的元素/组件，在rangeCount上返回“ 1”，但是在Edge上，它返回一个带有anchorNode null且在rangeCount上为“ 0”的对象。

这是我在工作的网站上遇到的相同问题，选择输入时遇到了麻烦（这是一个自定义输入，这就是为什么您将'td'标记视为anchorNode的原因在上一张图片中的chrome上），并获得了rangeCount，因为我在这些浏览器上获得了不同的值。

PS1。我在每个浏览器的开发人员工具上使用JS控制台进行了测试，这与在JS代码上使用它相同。我还在标签和标签（例如p，div）上测试了此getSelection函数，因为@ Deepak-MSFT在他的答案中做到了这一点，并且在这些标签中，这两种浏览器都能正常工作，问题是当我尝试在文本中使用它时输入类似于该搜索栏。

我要附加两个gif，这样您就可以在stackoverflow中看到我在搜索栏中输入的内容，以便您也可以重现它。

Process to test document.getSelection on search bar input in Stackoverflow page on Chrome

Process to test document.getSelection on search bar input in Stackoverflow page on Edge

-------------------------编辑（示例代码）----------------- --------

请在两个浏览器（Chrome和Edge）中运行此代码示例，以查看它们之间的差异。只需点击输入文字即可输入任何字符

<!DOCTYPE html>
<html>
<body>

Input text: <input type="text" onfocus="myFunction(this)">

<div>Anchor Node: <b id="divsel1"></b></div>
<div>Range Count: <b id="divsel2"></b></div>

<script>
function myFunction(x) {
  var sel = document.getSelection();
  document.getElementById("divsel1").innerHTML = sel.anchorNode ? sel.anchorNode.nodeName : sel.anchorNode;
  document.getElementById("divsel2").innerHTML = sel.rangeCount;
  
}
</script>

</body>
</html>

Answer 1

您没有发布任何示例代码，因此我们不确定您如何尝试在代码中进行选择。

我尝试使用下面的MS Edge中的代码进行测试，看起来工作正常。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function GetSelectedText () {
            if (document.getSelection) {    // all browsers, except IE before version 9
                var sel = document.getSelection ();
                    // sel is a string in Firefox and Opera, 
                    // and a selectionRange object in Google Chrome, Safari and IE from version 9
                    // the alert method displays the result of the toString method of the passed object
                alert (sel);
            } 
            else {
                if (document.selection) {   // Internet Explorer before version 9
                    var textRange = document.selection.createRange ();
                    alert (textRange.text);
                }
            }
        }
    </script>
</head>
<body>
    <div>Please select <b>all</b> or a <i>part</i> of this text.</div>
    <br />
    <button onclick="GetSelectedText ()">Get selected text!</button>
</body>
</html>

MS Edge中的输出：

参考：

getSelection method (document)

如果问题仍然存在，请尝试提供任何示例代码来产生问题，这将有助于我们更好地理解问题。

调用document.getSelection（）

1 个答案: