通过单击 contentEditable="false" 子节点来关注 contentEditable="true" 父节点答案

【问题标题】：Focusing contentEditable="true" parent by clicking on contentEditable="false" child nodes通过单击 contentEditable="false" 子节点来关注 contentEditable="true" 父节点
【发布时间】：2018-08-16 14:32:48
【问题描述】：

请看下面的例子：

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 强制它似乎没有效果，但随后选择位置设置为开头，这不是所需的行为。

有没有一种简单的方法可以做到这一点，还是我需要一个库来处理它？

【问题讨论】：

标签： javascript html contenteditable

【解决方案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>

【讨论】：