getSelection（）不能在IE中工作

有人可以帮我得到这个代码工作在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/

提前致谢…

Answer 1

9之前的IE不支持window.getSelection() 。 你可以使用document.selection来代替（参见这个msdn页面的描述）。 这个select对象有一个方法createRange() ，它返回一个TextRange对象（详见这个msdn页面 ）。

请注意， selection和textrange对象都是微软自己的实现，不符合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>"); }); 

它不像其他实现那么好，因为你必须使用string而不是dom。 将<span id="myUniqueId"></span>作为占位符粘贴，然后用domreplace它。 你仍然需要使用range.htmlText或range.text 。

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

Answer 2

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

这是一个黑客和不那么漂亮，但应该在IE浏览器和其他浏览器工作 – 我还没有做了很多的跨浏览器testing，虽然:)

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

Answer 3

对于交叉浏览器解决scheme，请参阅StackOverflow上的这个问题： 是否有getSelection（）的跨浏览器解决scheme？

这个问题不完全是这个问题的重复，所以我认为这个问题在这个答案中是有用的。 我做了这个答案社区维基。

Answer 4

如果你想着色“亚历克斯·托马斯”红色，你可以做

HTML

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

JS

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