Question

我遇到了令人难以置信的元素的不受欢迎的行为。在具有contenteditable = true的父级中嵌套带有contenteditable = false的块元素时，我无法编辑父元素。

＆＃13;

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

＆＃13;

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

＆＃13;

除了块元素之外，只有在有更多内容时才可以编辑/获得焦点。

浏览器：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>

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

1 个答案: