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

【问题标题】：Microsoft Edge is returning different values than Chrome when document.getSelection() is called调用 document.getSelection() 时，Microsoft Edge 返回的值与 Chrome 不同
【发布时间】：2019-10-31 05:06:45
【问题描述】：

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

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

我附上了两张图片，您可以在其中看到当指针焦点放置在同一元素/组件中时，Chrome 和 Edge 之间 document.getSelection() 返回的对象的差异。

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

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

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

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

在 Chrome 上，它在 anchorNode 中返回元素/组件，在 rangeCount 上返回一个“1”，但在 Edge 上，它返回一个对象，其中 anchorNode 为空，在 rangeCount 上返回一个“0”。

这与我正在处理的网站上遇到的相同问题，我在选择输入时遇到了问题（这是自定义输入，这就是为什么您将“td”标签视为锚节点在上一张图片中的 chrome 上）并获取 rangeCount，因为我在这些浏览器上获得了不同的值。

PS1。我在每个浏览器的开发人员工具上使用 JS 控制台对其进行了测试，这与在 JS 代码上使用它相同。我还在标签和标签（如 p,div ...像那个搜索栏一样输入。

我附上了两个 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>

【问题讨论】：

根据docs。 Edge 完全支持选择 API。您确定它不是空的，因为您在选择丢失后立即在某些单击事件处理期间记录它？
我们需要一个minimal reproducible example，带有一个重现的过程。您的 chrome 快照告诉您在元素内有一个折叠的选择。这本身就很奇怪，因为通常 focusNodes 是 TextNodes 而很少是 Elements。你对这个做了什么？
@Andrey 我在“焦点”事件上调用 getSelection 函数。我尝试了不同的事件，但我一直遇到同样的问题。请再看一遍问题，我对其进行了编辑以添加更实用的示例，以便您重现它。
@Kaiido 这是一个 td 标签，因为文本框输入是我网站上的自定义组件，但它与输入文本完全相同。请再看一遍问题，我对其进行了编辑以添加更实用的示例，以便您重现它。

【解决方案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)

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

【讨论】：

感谢 Deepak-MSFT，在这种情况下，从 div 标签中选择文本，选择在两种浏览器中都可以正常工作。问题是当我尝试在像那个搜索栏这样的文本输入中使用它时。请再看一遍问题，我对其进行了编辑以添加一个更实际的示例，以便您重现它。
我尝试在 Chrome 和 Edge 中运行您的示例代码。根据我的测试结果。我发现 Chrome 有时会显示 #text 或 body 作为锚节点。看这里。 i.postimg.cc/t4yb5s77/47.gif 其中，边缘始终将主体显示为具有 1 个范围计数的锚节点。看这里。 i.postimg.cc/zfB9tKND/46.gif
你说得对，我只是意识到我被微软愚弄了，因为我在 Windows 8 上所以我没有 Edge，但是当我使用 IE 时它显示 Edge on the developer工具窗口（@987654325@），我认为它模拟了 Edge 行为，但事实并非如此。既然您发布了这个并且它在您的环境中运行，我在 Win10 操作系统中的 Edge 上对其进行了测试，并且运行良好，所以这里的问题似乎是 IE 11，它是我正在使用的 IE 浏览器的版本。
如果您得到了问题的答案，那么我建议您将有用的建议标记为答案，这可能会在将来对类似问题的其他社区成员有所帮助。如果您对同一问题仍有其他疑问，可以让我们知道。我们将努力提供进一步的建议。感谢您的理解。