Search code examples
jqueryinternet-explorerrangy

Rangy - Range.setStartAfter in IE

I'm at wits-end with this issue in IE. I have an element with the contenteditable attribute set to "true". Inside there are various elements of which some cannot be changed, text wrapped in spans using a CSS class name "uneditable".

Using a handler for the "keydown" event, the anchorNode of the selection is inspected. If the anchorNode is a textnode of an uneditable element, the range is altered and set to start after the uneditable element node. This works perfectly in all browsers, except for the abomination called IE.

Take the following example: 

Lorem ipsum dolor sit <span class="uneditable">amet</span>, 
consectetur adipisicing elit

If the caret is at the end of the uneditable element, any character key pressed should add to the start of the next textnode. But in IE, the text is added to the end of the uneditable element.

Here is the handler: 

$("#myeditor").keydown(function(ev) 
{ 
    var sel = rangy.getSelection(); 
    var range = sel.getRangeAt(0); 
    if (sel.anchorNode.nodeType == 3) 
    { 
            if ($(sel.anchorNode.parentNode).is(".uneditable")) 
            { 
                    range.setStartAfter(sel.anchorNode.parentNode); 
                    rangy.getSelection().setSingleRange(range); 
            } 
    } 
});

Even if I select the next sibling and use range.setStart(nextSibling, 0), IE still adds the new text inside the uneditable element. How do I keep IE from editing my uneditable elements?

Any help will be greatly appreciated.

Solution

  • The problem is that IE simply does not allow you to place the caret in that position and instead "corrects" it to be at the end of the previous character. WebKit actually does the same thing. See http://jsfiddle.net/MZuFb/1/ for an example.

    The only workaround I can think of is to insert a temporary character and select it so that it gets overwritten: http://jsfiddle.net/timdown/MZuFb/2/