getSelection()在IE中不起作用

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/

提前致谢...

Answer 1

IE之前的IE不支持window.getSelection().您可以document.selection改为使用(有关说明,请参阅此msdn页面).此选择对象有一个createRange()返回对象的方法TextRange(有关详细信息,请参阅此msdn页面).

请注意,这些selection和textrange对象都是微软自己实现的,并且不遵循W3C标准.你可以阅读更多关于textrange和range问题上www.quirksmode.org/dom/range_intro.html.

以下实现在IE中有效:

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

它不像其他实现那么好,因为你必须使用字符串而不是dom.有一个hack你粘贴<span id="myUniqueId"></span>占位符,然后用dom替换它.你仍然有工作range.htmlText或range.text虽然.

BTW:上面的实现显然只是IE.您必须使用某些浏览器功能检测来确定要使用的版本.