IE11：document.getSelection 在 IE11 上的 Input（即文本）标签内无法正常工作答案

【问题标题】：IE11: document.getSelection not working properly inside Input (i.e. text) tags on IE11IE11：document.getSelection 在 IE11 上的 Input（即文本）标签内无法正常工作
【发布时间】：2019-11-03 19:22:13
【问题描述】：

我正在尝试使用 document.getSelection() 在输入 html 标记中获取选择，但它在 Internet Explorer 11 上不起作用。该函数受支持，但返回的值似乎错误。

我在 Chrome 和 Edge 上测试过，效果很好，看来问题与 IE11 有关。

在 Chrome 和 Edge 上，它返回一个带有 anchorNode 和 rangeCount 值的选择对象（不同于 0），并在调用 toString() 函数时显示选定的文本。当未选择任何内容或输入为空但已获得焦点时，它仍然在 anchorNode 和 rangeCount 上有值，但 toString 函数返回一个空字符串。

铬：

https://media.giphy.com/media/mFpXA8uv0GwUEx6Ofu/giphy.gif https://i.postimg.cc/ncnM5QtP/chrome-abc-selection.png

IE11：

https://media.giphy.com/media/mFpXA8uv0GwUEx6Ofu/giphy.gif https://i.postimg.cc/QxSVrx8x/IE11-abc-selection.png

我主要需要 getSelection() 返回的 rangeCount 属性值，因为我需要调用 getRange 函数，但我正在处理它，我遇到了 IE11 问题，我需要使网站兼容所有这些浏览器。

这是 Microsoft 可以修复的 IE11 错误还是我可以实施的解决方法？

【问题讨论】：

请注意，这实际上是一个 Chrome 错误。选择应忽略表单控件。顺便说一句，他们的实现使事情变得非常奇怪，如果您尝试在页面中选择该输入和其他文本，那么它将忽略输入的值...

标签： javascript internet-explorer dom internet-explorer-11

【解决方案1】：

您可以使用 HTML DOM 元素通过 element.selectionStart 和 element.selectionEnd 获取选择索引，然后您只需获取元素的值并使用索引对值执行子字符串...参见下面的示例.

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="myFunction()">Show me My Selection</button> 
<input id="myInput" type="text" value="This is my selection"><br>
<script>
	myFunction = function(){
    let element = document.getElementById("myInput");
    alert('The selected text = ' + element.value.substring(element.selectionStart,element.selectionEnd));  
}
</script>
</body>
</html>

【讨论】：