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(span);
});

Coded up here: http://jsfiddle.net/WdrC2/

Thanks in advance...

Answers


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);
};

For a crossbrowser solution see this question on StackOverflow: Is there a cross-browser solution for getSelection()?

This question is not quite a duplicate of this one, so I think it is useful to link the question in this answer instead. I made this answer community wiki.


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

Need Your Help

.NET Entity Framework - IEnumerable VS. IQueryable

entity-framework frameworks entity ienumerable iqueryable

Please see this line of code. This is an invocation of a stored procedure, which returns an ObjectResult&lt;long?&gt;. In order to extract the long values I added the Select:

Deserializing JSON - how to ignore the root element?

c# .net deserialization json.net

I'm consuming a WCF service that returns JSON results wrapped inside the 'd' root element. The JSON response looks like this: