Javascript getSelection() 在 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5421892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getSelection() not working in IE
提问by Alex
Can someone help me get this code working in IE please:
有人可以帮我让这段代码在 IE 中工作吗：
HTML:
HTML：
<p>Alex Thomas</p>
<button id="click">Click</button>
JS
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);
});
Coded up here: http://jsfiddle.net/WdrC2/
在这里编码：http: //jsfiddle.net/WdrC2/
Thanks in advance...
提前致谢...
回答by Elian Ebbing
IE prior to 9 doesn't support window.getSelection(). You can use document.selectioninstead (see this msdn pagefor the description). This selection object has a method createRange()that returns a TextRangeobject (see this msdn pagefor details).
9 之前的 IE 不支持window.getSelection(). 您可以document.selection改用（有关说明，请参阅此 msdn 页面）。此选择对象有一个createRange()返回对象的方法TextRange（有关详细信息，请参阅此 msdn 页面）。
Note that both the selectionand textrangeobjects are Microsofts own implementation and do not follow the W3C standards. You can read more about the textrangeand rangeissues on www.quirksmode.org/dom/range_intro.html.
请注意，selection和textrange对象都是微软自己的实现，并不遵循 W3C 标准。您可以在www.quirksmode.org/dom/range_intro.html上阅读有关textrange和range问题的更多信息。
The following implementation works in IE:
以下实现适用于 IE：
$('#click').click(function(){
var range = document.selection.createRange();
range.pasteHTML("<span style='color: red'>" + range.htmlText + "</span>");
});
It's not nearly as nice as the other implementation since you have to work with strings instead of the dom. There is a little hack where you paste <span id="myUniqueId"></span>as a placeholder, and afterwards replace it using the dom. You still have to work with range.htmlTextor range.textthough.
它不像其他实现那么好，因为您必须使用字符串而不是 dom。有一个小技巧，您可以将其粘贴<span id="myUniqueId"></span>为占位符，然后使用 dom 替换它。您仍然必须使用range.htmlText或range.text尽管如此。
BTW: the above implementation is obviously IE only. You have to use some browser capability detection to decide which version to use.
BTW：上面的实现显然只有 IE。您必须使用一些浏览器功能检测来决定使用哪个版本。
回答by Mark Schultheiss
Test this one here: http://jsfiddle.net/6BrWe/
在这里测试这个：http: //jsfiddle.net/6BrWe/
It is a bit of a hack and not so pretty but should work in IE and other browsers - I have not done a lot of cross browser testing though :)
这是一个小技巧，不那么漂亮，但应该可以在 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);
};
回答by Faber
If you want to color "Alex Thomas" to red you can do
如果你想把“亚历克斯·托马斯”涂成红色，你可以这样做
HTML
HTML
<p id='txt'>Alex Thomas</p>
<input type='button' id='btn' value='click' />
JS
JS
$('#click').click(function(){
$('#txt').attr('color','Red');
});
