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

Question

请看下面的例子：

<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" span 子节点的前端或末尾。

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

尝试用 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>

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

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

html

javascript

contenteditable