调用 document.getSelection() 时，Microsoft Edge 返回的值与 Chrome 不同
[英]Microsoft Edge is returning different values than Chrome when document.getSelection() is called
问题描述
I'm trying to use the getSelection function from document DOM to retrieve the element/component selected on Edge but I'm not getting any values on the anchorNode and getting a 0 on the rangeCount property in the object returned.
我正在尝试使用文档 DOM 中的getSelection函数来检索在 Edge 上选择的元素/组件，但我没有在 anchorNode 上获得任何值，并且在返回的对象中的 rangeCount 属性上获得了 0。 I'm testing this on Chrome also and it's works correctly there, that's why I know that the values returned by Edge are not OK.我也在 Chrome 上测试它并且它在那里正常工作，这就是为什么我知道 Edge 返回的值不正确。
I need to know if there is a way to get the right AnchorNode and RangeCount on Edge or if there's a bug.我需要知道是否有办法在 Edge 上获得正确的 AnchorNode 和 RangeCount，或者是否存在错误。 Also, if you know a kind of workaround to make this possible please let me know.另外，如果您知道一种解决方法可以使这成为可能，请告诉我。
I attached two Images where you can see the differences in the object returned by document.getSelection() between Chrome and Edge when the pointer focus is placed in the same element/component.我附上了两张图片，您可以在其中看到当指针焦点放置在同一元素/组件中时 Chrome 和 Edge 之间document.getSelection()返回的对象的差异。
Selection object returned when calling document.getSelection on Chrome在 Chrome 上调用document.getSelection时返回的选择对象
Selection object returned when calling document.getSelection on Edge在 Edge 上调用 document.getSelection 时返回的选择对象
------------------------- EDIT (for a more practical example) ------------------------- ------------------------- 编辑（更实际的例子）----------------- --------
To give you a more practical example I tried to make a selection on the main search bar input here in StackOverflow when it was empty and it retrieved me different values between Chrome and Edge (even with text it retrieves null on Edge).为了给你一个更实际的例子，当它为空时，我试图在 StackOverflow 中的主搜索栏输入上进行选择，它在 Chrome 和 Edge 之间检索到不同的值（即使文本在 Edge 上检索为空）。
On Chrome it returned the element/component in the anchorNode and a '1' on the rangeCount but on Edge it return an object with the anchorNode null and a '0' on rangeCount.在 Chrome 上，它返回了 anchorNode 中的元素/组件和 rangeCount 上的“1”，但在 Edge 上，它返回一个对象，anchorNode 为 null，而 rangeCount 上为“0”。
This is the same issue I'm having on the site that I'm working on, I'm having trouble when selecting an input (which is a custom input and that's why you see a 'td' tag as an anchorNode on chrome in the previous image) and getting the rangeCount because I'm getting different values on those browsers.这与我在我正在处理的网站上遇到的问题相同，我在选择输入时遇到问题（这是自定义输入，这就是为什么您在 chrome 中看到“td”标签作为锚节点的原因）上一张图片）并获得 rangeCount，因为我在这些浏览器上获得了不同的值。
PS1. PS1。 I tested it using the JS console on the developer tools of each browser which is the same as using it on JS code.我在各个浏览器的开发者工具上用JS控制台测试过，和在JS代码上用是一样的。 I also tested this getSelection function on labels and tags like p,div... as @Deepak-MSFT made it in his answer and in those tags it works fine for both browsers, the issue is when I try to use it inside a text input like the that search bar.我还在标签和标签上测试了这个 getSelection 函数，比如 p,div...，正如@Deepak-MSFT 在他的回答中所做的那样，在这些标签中它对两种浏览器都适用，问题是当我尝试在文本中使用它时输入像那个搜索栏。
I'm attaching two gifs so you can see what I tested on the search bar input here in stackoverflow so you can reproduce it as well.我附上了两个 gif，这样你就可以看到我在 stackoverflow 中的搜索栏输入上测试的内容，这样你也可以重现它。
Process to test document.getSelection on search bar input in Stackoverflow page on Chrome在 Chrome 上的 Stackoverflow 页面中的搜索栏输入上测试 document.getSelection 的过程
Process to test document.getSelection on search bar input in Stackoverflow page on Edge在 Edge 上的 Stackoverflow 页面中的搜索栏输入上测试 document.getSelection 的过程
------------------------- EDIT (sample code) ------------------------- ------------------------- 编辑（示例代码） -------------------- -----
Please run this code sample in both browsers, Chrome and Edge, to see their differences.请在 Chrome 和 Edge 两种浏览器中运行此代码示例，以查看它们之间的差异。 Just click on the input text on type any characters只需单击输入文本即可键入任何字符
<!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>
1 个解决方案
解决方案1
1 已采纳 2019-06-18 02:22:11
You did not posted any sample code so we are not sure how you are trying to get selection in your code.您没有发布任何示例代码，因此我们不确定您是如何尝试在代码中获得选择的。
I try to make a test with code below in MS Edge and looks like it is working fine.我尝试在 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>
Output in MS Edge: MS Edge 中的输出：
Reference:参考：
getSelection method (document) getSelection 方法（文档）
If issue persist than please try to provide any sample code to produce the issue will help us to understand the issue in better way.如果问题仍然存在，请尝试提供任何示例代码来产生问题，这将有助于我们更好地理解问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.