IE11: document.getSelection在IE11上的输入(即文本)标记内不能正常工作

基础概念

document.getSelection() 是一个用于获取用户在文档中所选内容的方法。它返回一个 Selection 对象，该对象包含了关于所选内容的信息，如范围、文本等。

问题描述

在 IE11 中，document.getSelection() 在某些情况下（如在输入框内的文本标记）可能无法正常工作。

原因分析

IE11 的 document.getSelection() 方法在处理输入框内的文本选择时存在一些兼容性问题。这主要是由于 IE11 对 DOM 标准的支持不够完善，特别是在处理富文本编辑器或带有复杂样式的输入框时。

解决方案

为了解决这个问题，可以采用以下几种方法：

方法一：使用 window.getSelection()

window.getSelection() 是一个更通用的方法，它在大多数浏览器中都能正常工作，包括 IE11。

function getSelectedText() {
    var selectedText = '';
    if (window.getSelection) {
        selectedText = window.getSelection().toString();
    } else if (document.selection && document.selection.type != 'Control') {
        selectedText = document.selection.createRange().text;
    }
    return selectedText;
}

方法二：使用 input 和 textarea 的事件监听

通过监听 input 和 textarea 的 selectionchange 事件，可以获取当前选中的文本。

document.getElementById('myInput').addEventListener('selectionchange', function() {
    var selectedText = this.value.substring(this.selectionStart, this.selectionEnd);
    console.log(selectedText);
});

方法三：使用第三方库

如果项目中已经使用了富文本编辑器（如 CKEditor 或 TinyMCE），这些编辑器通常会提供自己的方法来处理文本选择，从而避免浏览器兼容性问题。

应用场景

• 富文本编辑器：在需要用户编辑复杂格式文本的应用中。
• 在线文档编辑：如在线的 Word 或 PDF 编辑器。
• 交互式表单：需要用户选择特定文本字段的应用。

优势

• 兼容性：通过使用 window.getSelection() 或事件监听，可以提高在不同浏览器中的兼容性。
• 灵活性：可以根据具体需求选择合适的方法来获取选中的文本。

通过上述方法，可以有效解决在 IE11 中 document.getSelection() 在输入框内无法正常工作的问题。