0

This behaviour is specific to Chrome (at time of writing version 26.0.1410.64 m but I know it's been happening for a while).

Take the following HTML:

<div contenteditable="true">
    <div contenteditable="false">
        <div contenteditable="true"><div><span contenteditable="false">[Interruption]</span><span style="display: none;"></span></div></div>
    </div>

In the resulting ContentEditable Div, put the caret after the 'Interruption' span. Then try to use backspace to delete it. You'll find this is impossible.

Here is a jsfiddle illustrating this.

Note that typing some text immediately after the 'Interruption' span fixes the issue, in that you can then left-arrow back to where the span finishes and backspace successfully as usual. But as soon as you remove this text, the issue recurs.

It is of particular concern to me because a Span of display: none is an integral part of Rangy, the range and selection library I am using. I am finding that using Rangy will sometimes prevent Spans from being deleted and this seems to be the root cause.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Holf
  • 5,605
  • 3
  • 42
  • 63
  • The spans with `display: none` are used as marker elements in the selection save and restore module, as I'm sure you know. I wouldn't generally recommend leaving them lying around in the HTML while the user is editing because they could be deleted by the user and restoring the selection would no longer be possible. The use cases I had in mind were things like saving and restoring the selection before and after the user interacts with a dialog or some other piece of UI. – Tim Down May 10 '13 at 10:15
  • We're inserting a new marker element on each keystroke. Essentially we're using Rangy to create a dynamic marker for caret position in a ContentEditable Div. I see that this is probably not what it was intended for. But it is proving to be very effective, bar this small issue. – Holf May 10 '13 at 11:08

0 Answers0