<span contenteditable="true"> behaving strangely

482 views
Skip to first unread message

John Ky

unread,
Apr 24, 2009, 10:37:05 PM4/24/09
to
Hi all,

I asked this question on the XUL list, but it's probably more appropriate to
ask the question here.

I did some tests with the contenteditable attribute on a span element, and
it isn't working entirely as I expected.

For instance, take the following HTML code:

<html>
<body>
<script>
<!--
function dofocus(source)
{
var inline_edit = document.getElementById('inline_edit');
inline_edit.focus();
}
//-->
</script>
<span style="text-decoration: underline;" onclick="dofocus(this)">
<span>&nbsp;</span>
<span
id="inline_edit"
contenteditable="true"
style="text-decoration: underline;">
</span>
&nbsp;
</span>
</body>
</html>

When I click the underline, it sets the focus on the contenteditable span
element. This allows me to type stuff. However, it doesn't allow me to
delete the first character. Every time I try, not only does the first
letter not delete, but an extra space is added to the left of the span
element.

A demo of the problem is available in a screencast at the following URL
(Requires Flash plugin):

http://www.screencast.com/users/newhoggy/folders/Jing/media/f4cbc278-8634-479f-93a1-32d9b53d1db2

As it turns out, text nodes are being added all over the place for no
apparent reason.

Here's my attempt at removing them as they appear:

<html>
<body>
<script>
<!--
function dofocus(source)
{
var inline_edit = document.getElementById('inline_edit');
inline_edit.focus();
}

function clearSiblingText(source)
{
var sibling = source.parentNode.firstChild;
var siblingToRemove = null;
while (sibling != null) {
if (sibling.nodeType == 3) {
siblingToRemove = sibling;
} else {
siblingToRemove = null;
}
sibling = sibling.nextSibling;
if (siblingToRemove != null) {
siblingToRemove.parentNode.removeChild(siblingToRemove);
}
}
sibling = source.firstChild;
while (sibling != null) {
if (sibling.nodeType == 1) {
siblingToRemove = sibling;
} else {
siblingToRemove = null;
}
sibling = sibling.nextSibling;
if (siblingToRemove != null) {
siblingToRemove.parentNode.removeChild(siblingToRemove);
}
}
}
//-->
</script>
<span style="text-decoration: underline;"
onclick="dofocus(this)">&nbsp;<span><span
id="inline_edit"
contenteditable="true"
onkeypress="clearSiblingText(this)"></span></span>&nbsp;</span>
</body>
</html>

Unfortunately, there is still a BR element being added somewhere under the
inline_edit node when I delete all the text. I can't delete it from within
the handler, because it seems it gets added only after the onkeypress
handler is finished. I know because if I press backspace again after having
deleted all the text, the BR does get deleted.

Is it normal for <span contenteditable="true"></span> to behave in this way?

Thanks,

-John

Mats Palmgren

unread,
Jun 14, 2009, 7:38:05 PM6/14/09
to
On Apr 25, 4:37 am, "John Ky" <nos...@nospam.com> wrote:
> I asked this question on the XUL list, but it's probably more
> appropriate to ask the question here.

mozilla.dev.tech.editor is probably a better place.

> When I click the underline, it sets the focus on the contenteditable span
> element. This allows me to type stuff. However, it doesn't allow me to
> delete the first character. Every time I try, not only does the first
> letter not delete, but an extra space is added to the left of the span
> element.

This might have been fixed in bug 455992:
https://bugzilla.mozilla.org/show_bug.cgi?id=455992

FYI, we have fixed numerous bugs with contenteditable inline elements;
you can find the latest builds here:
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-central/


> Unfortunately, there is still a BR element being added somewhere under the
> inline_edit node when I delete all the text.

This might have been fixed in bug 456244:
https://bugzilla.mozilla.org/show_bug.cgi?id=456244

Please re-test in the latest build and report remaining bugs here:
https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=Editor
(first check that it's not filed already)


Thanks.
Mats

Reply all
Reply to author
Forward
0 new messages