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 9之前不支持window.getSelection()。您可以改为使用document.selection（有关说明，请参见this msdn page）。此选择对象的方法createRange()返回TextRange对象（有关详细信息，请参阅this msdn page）。

请注意，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>"); 
}); 

这不是几乎一样好其他的实现，因为你有一个字符串，而不是DOM工作。有一点点，你粘贴<span id="myUniqueId"></span>作为占位符，然后用dom替换它。尽管如此，您仍需要使用range.htmlText或range.text。

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

Answer 2

如果你想要的颜色 “亚历克斯·托马斯” 为红色，你可以做

HTML

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

JS

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

Answer 3

测试这一位置：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); 
}; 

Answer 4

对于一个跨浏览器的解决方案看这个问题在计算器上：Is there a cross-browser solution for getSelection()?

这个问题是不是这一个相当重复的，所以我觉得这个问题在这个答案链接，而不是它是有用的。我做了这个答案社区维基。