如何实现仅允许在<p>标签的单一位置插入文本？

当然有完美的解决方案！核心思路是把仅允许编辑的固定位置单独做成一个可编辑的内联元素，嵌套在<p>标签内部，而<p>本身保持不可编辑状态。这样用户只能在指定区域输入，完全无法修改段落的其他内容。

1. 基础结构实现 #

直接用<p>包裹不可编辑的文本，再插入一个contenteditable="true"的<span>作为唯一的可编辑区域：

<p>
  这是不可编辑的前缀文本
  <span contenteditable="true" class="editable-area">请在此处输入内容</span>
  这是不可编辑的后缀文本
</p>

这里的<span>就是用户唯一能操作的区域，<p>本身没有contenteditable属性，所以其他部分完全无法编辑。

2. 样式优化（提升用户体验） #

给可编辑区域加个明显的样式，让用户一眼就能看到哪里可以编辑：

.editable-area {
  background-color: #f5f5f5;
  outline: none; /* 去掉默认的焦点边框 */
  padding: 2px 5px;
  border-radius: 4px;
}

.editable-area:focus {
  background-color: #e8f4fd; /* 聚焦时的背景色变化 */
}

3. 增强限制：防止误删可编辑区域 #

为了避免用户不小心删除可编辑区域的内容（或者把区域弄空），可以用JavaScript做简单的监听处理：

const editableArea = document.querySelector('.editable-area');

// 当内容为空时自动恢复提示文本
editableArea.addEventListener('input', () => {
  if (editableArea.textContent.trim() === '') {
    editableArea.textContent = '请在此处输入内容';
  }
});

// 可选：阻止在内容为空时按Backspace/Delete键
editableArea.addEventListener('keydown', (e) => {
  if ((e.key === 'Backspace' || e.key === 'Delete') && editableArea.textContent.length === 0) {
    e.preventDefault();
  }
});

4. 内容的获取与设置 #

如果需要获取用户输入的内容，直接读取editableArea.textContent即可；要设置默认内容的话，给editableArea.textContent赋值就行，非常直观：

// 获取内容
const userInput = editableArea.textContent;
console.log('用户输入的内容：', userInput);

// 设置内容
editableArea.textContent = '默认填充的内容';

这种方案的优势很明显：

• 完全满足需求，严格限制编辑范围
• 原生实现，不需要依赖任何第三方库
• 兼容性极佳，所有现代浏览器都支持contenteditable属性
• 实现成本低，代码简洁易懂

内容的提问来源于stack exchange，提问作者Örom Loidl