CODEWITHSUNDEEP
javascripthtmlcontenteditable
jacobdo
jacobdo

Reputation: 1615

Focusing contentEditable="true" parent by clicking on contentEditable="false" child nodes

Please see the following example:

Codepen example

<div class="editable" contentEditable="true">Some more text here
  <span contentEditable="false">not editable</span>
  Hi this is my content
</div>

$(document).on('click', '.editable span', function() {
   $(this).closest('.editable')[0].blur();
  $(this).closest('.editable')[0].focus();
});

I wish to focus the parent contentEditable="true" and place the caret either the front or the end of the contentEditable="false" span child node.

In the example, the editable parent seems to be focused when user clicks on the non-editable child node, but there is no caret and so it is not possible to type in.

Trying to force it with jquery seems to have no effect unless you blur it first, but then the selection position is set to the beginning, which is not the desired behaviour.

Is there a simple way of doing this or do I need a library for it?

Upvotes: 0

Views: 806

Answers (1)

c-smile
c-smile

Reputation: 27460

Check this: HTML contenteditable with non-editable islands

Basic idea is to use empty span with ::before { content:"caption"; }

span.non-editable::before { 
  content:attr(name); 
  background:gold; 
  display:inline-block; 
 }
<div class="editable" contentEditable="true">Some more text here
  <span class=non-editable name="placeholder"></span>
  Hi this is my content
</div>

Upvotes: 2

Related Questions