Gergo
Gergo

Reputation: 2290

Create TextSelection from selection in IE11

I am trying to fix an application in IE11 and I stuck in this bug: In the older version of IE ther was a simple selection object but it is deprecated in IE11. The MSDN page offer to use getSelection instead of that, but it is not the same. I need to create a TextRange based on the selection and in the old API there was a simple solution:

// there is a TextRange object what I need
var textRange = document.selection.createRange();

The new HTMLSelection object has no createRange() method and I didn't find any proper solution, what is not modify the DOM.

I try this: http://jsfiddle.net/p4Lu4/1/ (Usage: Select some text and hit any key. )

The problem with it: If you select throw one of the red boxes, it will remove the box.

Can anyone know a better solution?

Solution:

I think, I found a solution. Not the best and nicest but it is working for me: I can create the exact same TextRange from Selection.

http://jsfiddle.net/p4Lu4/4/

Update 2:

I create a modul for this: https://gist.github.com/festo/50fe800c7369db140a62

Upvotes: 4

Views: 3136

Answers (1)

Tim Down
Tim Down

Reputation: 324587

My Rangy library has code to convert a DOM-compatible range to an IE TextRange as part of providing DOM range and selection support in IE <= 8. The latest build exposes this conversion explicitly on the selection object:

var textRange = rangy.getSelection().getNativeTextRange();

Note that the getNativeTextRange() method of a Rangy selection only exists in IE.

Another alternative is to use Rangy's TextRange module, which among other things adds an IE-like findText() method to Rangy's range object, along with the class applier module to do the highlighting. This will work in all major browsers.

Demo: http://jsfiddle.net/sycqeev2/

I'm not sure what's supposed to happen in your demo when you highlight text and press a key, so I haven't attempted to do anything with that.

Upvotes: 2

Related Questions