HTML5 contenteditable - contenteditable = falseの子ブロック要素が親にフォーカスしないようにする

Question

contenteditable要素で望ましくない動作が発生しています。 contenteditable = falseのブロック要素をcontenteditable = falseでネストすると、親要素をまったく編集できません。

.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>

ブロック要素以外にも多くのコンテンツは、そこだときにフォーカスを取得/編集することのみ可能です。

ブラウザ：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>