时间戳

首页 > 解决方案 > 通过单击 contentEditable="false" 子节点来关注 contentEditable="true" 父节点

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

问题描述

请看下面的例子：

代码笔示例

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

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

标签： javascripthtmlcontenteditable

解决方案

检查这个： HTML contenteditable with non-editable island

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

推荐阅读