Microsoft Edge 在调用 document.getSelection() 时返回与 Chrome 不同的值

Question

我正在尝试使用文档 DOM 中的 getSelection 函数来检索在 Edge 上选择的 element/component 但我没有在 anchorNode 上获得任何值并获得对象 return 中的 rangeCount 属性为 0。我也在 Chrome 上测试它，它在那里工作正常，这就是为什么我知道由 Edge 编辑的值 return 不正确。

我需要知道是否有办法在 Edge 上获得正确的 AnchorNode 和 RangeCount，或者是否存在错误。另外，如果您知道一种使这成为可能的解决方法，请告诉我。

我附上了两张图片，您可以在其中看到 Chrome 和边缘之间由 document.getSelection() 编辑的对象 return 的差异，当指针焦点位于同一 element/component.

选择对象 return 在 Chrome 上调用 document.getSelection 时编辑

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

------------------------ 编辑（更实际的例子）------------ --------------

为了给你一个更实际的例子，我尝试在 Whosebug 的主搜索栏输入上进行选择，当时它是空的，它检索了 Chrome 和 Edge 之间的不同值（即使是文本）在 Edge 上检索 null）。

在 Chrome 上它 return 编辑了 anchorNode 中的 element/component 和 rangeCount 上的 '1' 但在 Edge 上 return anchorNode 为 null 的对象和 rangeCount 上的“0”。

这与我在我正在处理的网站上遇到的问题相同，我在选择输入时遇到了问题（这是自定义输入，这就是为什么您会看到 'td'标记为上图中 chrome 上的 anchorNode）并获取 rangeCount 因为我在这些浏览器上获得了不同的值。

PS1。我在每个浏览器的开发者工具上使用 JS 控制台测试了它，这与在 JS 代码上使用它是一样的。我还在标签和标签上测试了这个 getSelection 函数，比如 p,div... 正如@Deepak-MSFT 在他的回答中所做的那样，在这些标签中它对两种浏览器都适用，问题是当我尝试使用它在文本输入中，例如那个搜索栏。

我附上了两个 gif，这样你就可以看到我在 Whosebug 的搜索栏输入中测试的内容，这样你也可以重现它。

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

Process to test document.getSelection on search bar input in Whosebug 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)

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

Microsoft Edge 在调用 document.getSelection() 时返回与 Chrome 不同的值

Microsoft Edge is returning different values than Chrome when document.getSelection() is called

html

javascript

dom

google-chrome

microsoft-edge