getSelection() 在 IE 中不起作用答案

【问题标题】：getSelection() not working in IEgetSelection() 在 IE 中不起作用
【发布时间】：2011-03-24 15:51:08
【问题描述】：

谁能帮我让这段代码在 IE 中工作：

HTML：

<p>Alex Thomas</p>
<button id="click">Click</button>

$('#click').click(function(){
    var range = window.getSelection().getRangeAt(0);
    var selectionContents = range.extractContents();
    var span = document.createElement("span");
    span.style.color = "red";
    span.appendChild(selectionContents);
    range.insertNode(span);
});

在这里编码：http://jsfiddle.net/WdrC2/

提前谢谢...

【问题讨论】：

@Alex IE 9 之前没有实现getSelection()。
该代码在 Chrome 8 中适用于我。我选择了文本并单击了按钮，文本变成了红色，所以有些工作。
@Alex 您的演示适用于所有当前浏览器（IE9、FF4、Chrome 10、Safari 5 和 Opera 11）。
+1 这是一个很棒的 getSelection 演示。
+1 个很好的问题和演示

标签： javascript jquery internet-explorer

【解决方案1】：

9 之前的 IE 不支持window.getSelection()。您可以改用document.selection（有关说明，请参阅this msdn page）。此选择对象有一个方法createRange()，它返回一个TextRange 对象（有关详细信息，请参阅this msdn page）。

请注意，selection 和 textrange 对象都是 Microsoft 自己的实现，不遵循 W3C 标准。您可以在www.quirksmode.org/dom/range_intro.html 上阅读有关textrange 和range 问题的更多信息。

以下实现在 IE 中有效：

$('#click').click(function(){
    var range = document.selection.createRange();
    range.pasteHTML("<span style='color: red'>" + range.htmlText + "</span>");
});

它不如其他实现好，因为您必须使用字符串而不是 dom。有一个小技巧，您可以将 <span id="myUniqueId"></span> 粘贴为占位符，然后使用 dom 替换它。不过，您仍然需要使用 range.htmlText 或 range.text。

顺便说一句：上面的实现显然只是 IE。您必须使用一些浏览器功能检测来决定使用哪个版本。

【讨论】：

你确定IE9不支持window.getSelection()吗？ msdn.microsoft.com/en-us/library/ie/ff975169(v=vs.85).aspx 说有..
@Rijk 你是对的，这就是我写“IE prior to 9 不支持 window.getSelection()”的原因。 :)
在 IE 11 document.selection 返回 undefined -- 我不太确定上述答案是否有效。

【解决方案2】：

在这里测试这个：http://jsfiddle.net/6BrWe/

这有点小技巧，不是很漂亮，但应该可以在 IE 和其他浏览器中使用 - 不过我还没有做过很多跨浏览器测试 :)

$('#click').click(function() {
    var whatBrowser = getIt();
    if (whatIsIt == 'notIE' && whatBrowser) {
        notIE(whatBrowser);
    }
    else if (whatIsIt == "isIE"&& whatBrowser) {
        isIE(whatBrowser);
    };
});

var whatIsIt = "";

function getIt() {
    if (window.getSelection) {
        whatIsIt = "notIE";
        return window.getSelection();
    }
    else if (document.getSelection) {
        whatIsIt = "notIE";
        return document.getSelection();
    }
    else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            whatIsIt = "isIE";
            return selection;
        };
        return false;
    };
    return false;
};

function isIE(selection) {
    if (selection) {
        var selectionContents = selection.text;
        if (selectionContents) {
            selection.pasteHTML('<span class="reddy">' + selectionContents + '</span>');
        };
    };
};

function notIE(selection) {
    var range = window.getSelection().getRangeAt(0);
    var selectionContents = range.extractContents();
    var span = document.createElement("span");
    span.className= "reddy";
    span.appendChild(selectionContents);
    range.insertNode(span);
};

【讨论】：

有了所有这些 JS，我不得不想知道为什么你不只是在第一行写一个document.getElementById("click").onclick。但是，+1 表示使用特征检测的彻底答案。
OP 那里有 jQuery，所以我没有改变那部分

【解决方案3】：

如果你想把“亚历克斯·托马斯”涂成红色，你可以这样做

HTML

<p id='txt'>Alex Thomas</p>
<input type='button' id='btn' value='click' />

$('#click').click(function(){
  $('#txt').attr('color','Red');
});

【讨论】：

他想让“Alex Thomas”的突出显示部分变成红色，而不是全部。