javascript - 通过单击 contentEditable ="true"子节点来聚焦 contentEditable ="false"父节点

Question

请参阅以下示例:

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();
});

我希望聚焦父 contentEditable="true"并将插入符号放置在 contentEditable="false"跨度子节点的前面或末尾。

在该示例中，当用户单击不可编辑的子节点时，可编辑的父节点似乎获得焦点，但没有插入符号，因此无法输入。

尝试用 jquery 强制它似乎没有效果，除非你先模糊它，但随后选择位置设置为开始，这不是所需的行为。

有没有一种简单的方法可以做到这一点，或者我是否需要一个库？

Answer 1

检查一下: HTML contenteditable with non-editable islands

基本思想是使用空范围 ::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>