contenteditable属性div开发需求：用户输入需保留基础div容器

核心思路 #

给contenteditable的父容器预先嵌套一个基础div作为输入容器，通过JS监听输入事件，确保这个基础div不会被删除，同时将用户输入的所有内容约束在这个基础div内部。

1. HTML结构 #

先构建基础的可编辑容器结构，提前放入用于输入的基础div，并给它一个专属类名方便后续操作：

<div contenteditable="true" class="editable-wrapper">
  <div class="base-input-box"></div>
</div>

2. CSS样式 #

给容器和基础div设置必要样式，保证空状态下基础div也能被点击输入：

.editable-wrapper {
  border: 1px solid #ddd;
  padding: 8px;
  min-height: 120px;
  border-radius: 4px;
}

.base-input-box {
  min-height: 24px; /* 空状态下保留可点击区域 */
  line-height: 1.5;
}

3. JavaScript逻辑 #

通过监听输入事件，处理基础div的存在性校验和内容约束：

const editableWrapper = document.querySelector('.editable-wrapper');
const baseBoxClass = 'base-input-box';

// 监听输入事件，维护基础div的存在和内容约束
editableWrapper.addEventListener('input', () => {
  let baseBox = editableWrapper.querySelector(`.${baseBoxClass}`);

  // 如果基础div被意外删除，重新创建并插入
  if (!baseBox) {
    baseBox = document.createElement('div');
    baseBox.classList.add(baseBoxClass);
    editableWrapper.appendChild(baseBox);
  }

  // 将容器内不属于基础div的内容（文本节点、其他元素）移到基础div内
  const childNodes = Array.from(editableWrapper.childNodes);
  childNodes.forEach(node => {
    if (node !== baseBox) {
      // 过滤空文本节点，避免冗余
      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '') {
        node.remove();
        return;
      }
      baseBox.appendChild(node);
    }
  });
});

// 页面加载时初始化，确保基础div存在
window.addEventListener('load', () => {
  let baseBox = editableWrapper.querySelector(`.${baseBoxClass}`);
  if (!baseBox) {
    baseBox = document.createElement('div');
    baseBox.classList.add(baseBoxClass);
    editableWrapper.appendChild(baseBox);
  }
});

效果说明 #

• 首次输入时，内容会直接进入预设的基础div，不会出现内容在父容器的情况
• 即使用户删除所有内容，基础div会被保留，仍可点击输入
• 若用户误操作删除了基础div，JS会自动重建它，并将后续输入的内容重新约束到新的基础div内

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