CONTENTEDITABLE：防止内部元件被删除

<div class="example" contenteditable="true"> 
    <div class="inside">Some content</div> 
</div>

当我删除“Some content”，然后class="inside" DIV也被删除。内容被删除后，有没有办法阻止内部div被删除？

例如，这是我努力使一旦内容被删除了的样子。

<div class="example" contenteditable="true"> 
    <div class="inside"></div> <!-- The div is not deleted --> 
</div>

我环顾四周，但似乎并没有一个明确的答案。

任何帮助将不胜感激。

谢谢。

2016-12-01 steve Kim

https://jsfiddle.net/rzm156px/也不会被删除。 –

嗯这很奇怪。在Chrome浏览器中，除了顶部带'contenteditable' attr的div以外，所有内容都会被删除。 –

号码在你的CSS中的东西打破代码。 –

.inside, .example { 
 
    display: inline; 
 
}

<div class="example" contenteditable="true"> 
 
    <div class="inside">Some content</div> 
 
</div>

也许有一个风格，是行内元素。

由于宽度将是0％时删除该内容。您不能再次点击或添加任何内容。

所以，我的解决方案将是

.inside, .example { 
    display: block; 
}

，如果你愿意，你可以指定宽度。 :)

.inside, .example { 
 
    display: block; 
 
}

<div class="example" contenteditable="true"> 
 
    <div class="inside">Some content</div> 
 
</div>

2016-12-01 02:13:58

如果您检查元素（在Chrome中），则在这两种情况下，内部div都会被删除。 –

@steveKim是的。现在，我明白你的问题。对不起，但为什么你不想使用文本框有特别的原因吗？ –

谢谢你的帮助。我想过使用textarea，但我需要在输入字段内部有一些html标记，而textarea不允许使用html元素。（为了更好地控制输入数据）。 –

回答