在IE中getSelection()无法正常工作

Question

有人可以帮我让这段代码在IE中运行吗？

HTML：

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

JS

$('#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

---

@Alex IE 9 之前的版本不支持 getSelection() 方法。 - Šime Vidas

代码在Chrome 8中对我有效。我选择了文本并单击按钮，文本变成了红色，所以某些东西起作用了。 - Blender

+1 这是一个很棒的 getSelection 演示。 - Šime Vidas

+1 很棒的问题和演示 - Hacknightly

尊敬的Šime Vidas，谢谢您的建议，我会尝试一下。 - Alex

Answer 1

IE 9之前的版本不支持window.getSelection()，您可以改用document.selection（详细信息请参见此 msdn 页面）。该选择对象具有一个createRange()方法，返回一个TextRange对象（详细信息请参见此 msdn 页面）。

请注意，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浏览器。你需要使用某些浏览器能力检测来决定使用哪个版本。

- Elian Ebbing

---

你确定IE9不支持window.getSelection()吗？http://msdn.microsoft.com/en-us/library/ie/ff975169(v=vs.85).aspx上说它支持。 - Rijk

@Rijk 你是对的，这就是为什么我写了“IE 9之前 不支持window.getSelection()。” :) - Elian Ebbing

在IE 11中，document.selection返回undefined -- 我不太确定上面的答案是否有效。 - robskrob

Answer 2

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

这是一个有点hack的方法，不太美观，但应该可以在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);
};

- Mark Schultheiss

---

有了那么多的JS，我不禁想知道为什么你没有在第一行中使用document.getElementById("click").onclick。然而，对于使用特性检测的详细回答给予+1的赞扬。 - user1385191

OP在那里使用了jQuery，所以我没有更改那部分。 - Mark Schultheiss

Answer 3

如果您想将“Alex Thomas”颜色设置为红色，可以执行以下操作： HTML

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

JS

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

- Faber

---

他想把“Alex Thomas”这个部分高亮，并且变成红色，而不是整个文本都变成红色。 - gen_Eric