Range.setStartAfter in IE

[Neil Craig]

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.

[Morgan Tiley]

Neil,
What about setting "unselectable='on'" on the span. that way user won't even be able to put cursor in span.

This is an IE only property. Other browsers have css to do it:

    user-select: none;
    -o-user-select: none;
    -moz-user-focus: ignore;
    -moz-user-select: none;
    -khtml-user-select: none;

This is probably a better use experience too, as it might be confusing that user tries to change "amet" to "ammet" but the m they type goes to the right of it.


Morgan

[Tim Down]

Neil,

How about putting contenteditable="false" on your uneditable spans?
That seems so obvious I assume you can't do that for some reason.

IE is frustrating and it's very diifficult (sometimes impossible) to
place the caret precisely at node boundaries. It's where the
abstraction starts to show through. I'm not sure whether there's a
nice way to fix it in this instance. There's a hack you could use:
place a zero-width space character (I've used a Unicode BOM character,
U+FFEF, for this purpose before) at the start of the text node
following the uneditable span and set the caret immediately after
that. That does leave you either with stray zero-width space
characters in your content or the task of cleaning them up later.

Tim

[Neil Craig]

Hi

Thanks for the response but unfortunately it did not work, IE still
allow the editing of the element.

On Aug 26, 3:12 pm, Morgan Tiley <morgan.ti...@gmail.com> wrote:
> Neil,
> What about setting "unselectable='on'" on the span. that way user won't even
> be able to put cursor in span.
>
> This is an IE only property. Other browsers have css to do it:
>
>     user-select: none;
>     -o-user-select: none;
>     -moz-user-focus: ignore;
>     -moz-user-select: none;
>     -khtml-user-select: none;
>
> This is probably a better use experience too, as it might be confusing that
> user tries to change "amet" to "ammet" but the m they type goes to the right
> of it.
>
> Morgan
>