getSelection() not working in IE
Can someone help me get this code working in IE please:
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(spa开发者_StackOverflow中文版n);
});
Coded up here: http://jsfiddle.net/WdrC2/
Thanks in advance...
IE prior to 9 doesn't support window.getSelection()
. You can use document.selection
instead (see this msdn page for the description). This selection object has a method createRange()
that returns a TextRange
object (see this msdn page for details).
Note that both the selection
and textrange
objects are Microsofts own implementation and do not follow the W3C standards. You can read more about the textrange
and range
issues on www.quirksmode.org/dom/range_intro.html.
The following implementation works in 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.htmlText
or range.text
though.
BTW: the above implementation is obviously IE only. You have to use some browser capability detection to decide which version to use.
Test this one here: 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 :)
$('#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);
};
If you want to color "Alex Thomas" to red you can do
HTML
<p id='txt'>Alex Thomas</p>
<input type='button' id='btn' value='click' />
JS
$('#click').click(function(){
$('#txt').attr('color','Red');
});
精彩评论