0

I'm experiencing an unwanted behavior with contenteditable elements. When nesting a block element with contenteditable=false in a parent with contenteditable=true, I can't get edit the parent element at all.

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

It is only possible to edit/get focus when there's more content, besides the block element.

Browser: Chrome

Any suggestions to prevent this behavior?

pelican_george
  • 961
  • 2
  • 13
  • 33
  • Strange.. i was not able to delete the span.tag in chrome,but in FF i was able to delete it !!. maybe this question will shed some more light http://stackoverflow.com/questions/17890568/contenteditable-div-backspace-and-deleting-text-node-problems – semuzaboi Dec 20 '16 at 12:56
  • oh, forgot to mention that chrome is the affected browser. thanks for the link. – pelican_george Dec 20 '16 at 13:06

1 Answers1

0

Add some content to edit within the parent element. It will be editable. I mean like below:

<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>
Taniya
  • 550
  • 2
  • 7