当contenteditable容器最后子元素不可编辑时，如何实现尾部编辑？

当contenteditable容器的最后一个元素是不可编辑状态时，点击容器内的空白区域无法激活输入，可通过以下两种方式解决：

方法一：添加可编辑的空白占位元素 #

在不可编辑元素的末尾添加一个可编辑的空白元素，让点击事件能定位到可编辑区域。推荐用<br>或者带样式的空span，避免影响原有布局：

示例代码（用<br>）： #

<div contenteditable="true">
  <span contenteditable="false">Read only</span>
  <br>
</div>

示例代码（用空span，无额外换行）： #

<div contenteditable="true">
  <span contenteditable="false">Read only</span>
  <span contenteditable="true" style="display:inline-block; width:1px;">&nbsp;</span>
</div>

这种方法无需JavaScript，适合静态内容场景，空白占位元素不会影响视觉效果，同时能让点击空白区域时激活输入。

方法二：通过JavaScript手动定位光标 #

监听contenteditable容器的点击事件，当检测到最后一个子元素为不可编辑状态时，手动将光标定位到该元素后方：

示例代码： #

document.querySelectorAll('[contenteditable="true"]').forEach(editable => {
  editable.addEventListener('click', function(e) {
    const lastChild = this.lastElementChild;
    // 判断最后一个子元素是否为不可编辑状态
    if (lastChild && lastChild.contentEditable === 'false') {
      const range = document.createRange();
      const selection = window.getSelection();
      // 将光标设置在不可编辑元素的后方
      range.setStartAfter(lastChild);
      range.collapse(true);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  });
});

这种方法适合动态生成内容的场景，无需修改HTML结构，通过代码逻辑处理光标定位。

内容的提问来源于stack exchange，提问作者apc