Question

112

getSelection() not working in IE

rated 0 times [ 117] [ 5] / answers: 1 / hits: 25419 / 13 Years ago, thu, march 24, 2011, 12:00:00

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

Only authorized users can answer the question. Please sign in first, or register a free account.

stacie

Add To Favorites

Follow

Total Points: 476

Total Questions: 92

Total Answers: 102

Location: Bosnia and Herzegovina

Member since Tue, Mar 29, 2022

2 Years ago

stacie questions

1 How to perform validation of a array field using formik and yup validation

Wed, Mar 31, 21, 00:00, 3 Years ago

1 Validation not working on angular reactive forms

Fri, Jun 26, 20, 00:00, 4 Years ago

1 CropperJS Not working well when using it in modal

Thu, Jan 23, 20, 00:00, 4 Years ago

1 Keyboard shortcuts in React, the react-hotkeys library

Fri, Aug 30, 19, 00:00, 5 Years ago

1 Date Pipe in Angular 8

Fri, Aug 2, 19, 00:00, 5 Years ago

View All

answered 13 Years ago valentinam · Accepted Answer

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.