css - HTML5 contenteditable - 带有 contenteditable=false 的子 block 元素阻止将焦点放在父级上

Question

我在使用 contenteditable 元素时遇到了不希望的行为。在 contenteditable=true 的父元素中嵌套 contenteditable=false 的 block 元素时，我根本无法编辑父元素。

.edit-box{
  border: 1px solid black;
  padding: 10px;
}
.tag{
  display:block;
  background-color: red;
  color:white;
}

<div id="test" contenteditable="true" class="edit-box">
  <span class="tag" contenteditable="false">TAG</span>
</div>

只有在除了 block 元素之外还有更多内容时，才能编辑/获取焦点。

浏览器:Chrome

有什么防止这种行为的建议吗？

Answer 1

在父元素中添加一些要编辑的内容。它将是可编辑的。我的意思是像下面这样:

<div id="test" contenteditable="true" class="edit-box">
 <span class="someclass">Content to be editable</span>
 <br>
 <span class="tag" contenteditable="false">TAG</span>
</div>