知足，怪异的子元素行为，而不是空白独立？ [英] Contenteditable, bizarre behaviour of child elements, and NOT whitespace independent?

问题描述

我一直在玩 contenteditable 字段，并且遇到了一个奇怪的行为，我无法弄清楚。

查看

...但它仍然适用于我为什么会有区别。

我希望它是可删除的，所以解决方案显然只是使用前一版本，但它仍然很好奇为什么这个问题存在。

另外！如果你碰巧是一个 contenteditable guru，我一直在处理另一个问题

（

然而，退格的确如此在第二种情况下没有按预期工作。删除不可编辑范围的唯一方法是在它后面添加一个字符，然后将光标移到它之前并删除。这可能是一个错误，虽然它存在于Safari（如你所说）和Chrome（根据我的测试）。

我认为这个问题有待进一步讨论与浏览器供应商的支持。顺便说一下，在FireFox中，这表现得非常一致：在这两种情况下， span 都不能被删除，而在第一个中没有任何内容，而在第二个中，在 span 之后的空格（可以删除，of'course）。

I've been playing around with contenteditable fields, and have come across an odd behaviour that I cannot figure out.

Check out fiddle for this particular problem.

I have two identical contenteditable divs. Both of them have the same <span> child, followed by a single blank character (otherwise carrot issues ensue). The only difference between the two is that the second div has been "prettified", and made more readable by indenting the <span> on a new line.

<div style="margin-bottom: 15px;" contenteditable="true"><span class="lead" contenteditable="false">Something something</span>&#8203;</div>


<div contenteditable="true">
  <span class="lead" contenteditable="false">Something something</span>&#8203;
</div>

Try this in both of the divs...

1. Place the carrot to the right-end of the content (i.e. after the blank character)
2. Then hit backspace a couple times

You'll notice that in the top (first) contenteditable div, you can delete the <span> element, as though it were one giant character. You should also notice that that in the second div, no amount of backspacing will ever clear it out. At least not in Safari.

So what gives!? I thought HTML was whitespace independent - why the difference in behaviour of the two?

Viewing the source, they have slightly different markup...

... but it still behooves me as to why there would be any difference.

I would like it to be deletable, and so the solution is obviously just to use the former version, but it is still curious as to why this issue exists at all.

Also! If you happen to be a contenteditable guru, I've been fighting with another issue over here. Any help on that one is welcome!

解决方案

HTML is not white-space independent; instead, mulitple white-space characters are considered the same thing as one space symbol. The issue here is not about contenteditable, rather it's about beautifying changes actual DOM here. Check out this fiddle, it illustrates the issue. HTML:

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

<div style="clear: both;"></div>

<div class="left"></div><div class="center"></div><div class="right"></div>

CSS:

.left, .right { width: 25%; }
.center { width: 50%; }
.left, .right, .center { display: inline-block; height: 1em; }
.left { background-color: red; }
.center { background-color: green; }
.right { background-color: blue; }

As you can see one linebreak (equal to one space) makes some space between the blocks while when there's no whitespace at all, everything works "as expected".

Still, I have to admit, the behaviour is rather strange: when DOM inspector is open, it shows me (in Chrome)

(zero width space character here) and if I put the cursor to the end and hit backspace once, get identical DOM elements (ok, I've tried removing margin as well):

However, backpace doesn't work as expected in the second case. The only way to delete the non-editable span is to add an character after it, then move cursor before it and delete. This may be a bug, although it is present in both Safari (as you say) and Chrome (according to my tests).

I think this is to be discussed further with browser vendors' support. By the way, in FireFox this behaves quite consistently: the span can't be deleted in both cases, and in the first one there's nothing after it while in the second one there's a space after the span (which can be deleted, of'course).

这篇关于知足，怪异的子元素行为，而不是空白独立？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！