<span contenteditable="true"> behaving strangely
John Ky
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> </span>
<span
id="inline_edit"
contenteditable="true"
style="text-decoration: underline;">
</span>
</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)"> <span><span
id="inline_edit"
contenteditable="true"
onkeypress="clearSiblingText(this)"></span></span> </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
> 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