如何阻止contenteditable容器中不可编辑元素被Backspace/Delete键删除？

你已经通过给span标签设置contenteditable="false"实现了内容不可编辑，但Backspace和Delete键仍能移除这些不可编辑元素。可以通过JavaScript监听键盘事件，拦截这类误删操作，具体实现如下：

完整代码示例 #

CSS #

span[contenteditable="false"] {
  color: red;
  background-color: #f0f0f0;
}

HTML #

<div contenteditable="true" id="editableDiv">
  可编辑文本 <span contenteditable="false">不可删除的文本</span> 可编辑文本
</div>

JavaScript #

const editableDiv = document.getElementById('editableDiv');

editableDiv.addEventListener('keydown', function(e) {
  const key = e.key;
  // 只处理Backspace和Delete键
  if (!['Backspace', 'Delete'].includes(key)) return;

  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;
  
  const range = selection.getRangeAt(0);
  const startNode = range.startContainer;

  // 处理Backspace删除逻辑
  if (key === 'Backspace') {
    // 光标在元素开头，前一个兄弟元素是不可编辑的
    if (range.startOffset === 0) {
      const prevEl = startNode.nodeType === Node.ELEMENT_NODE 
        ? startNode.previousElementSibling 
        : startNode.parentElement.previousElementSibling;
      
      if (prevEl && prevEl.getAttribute('contenteditable') === 'false') {
        e.preventDefault();
      }
    }
  }

  // 处理Delete删除逻辑
  if (key === 'Delete') {
    // 光标在元素末尾，后一个兄弟元素是不可编辑的
    if (range.startOffset === startNode.length) {
      const nextEl = startNode.nodeType === Node.ELEMENT_NODE 
        ? startNode.nextElementSibling 
        : startNode.parentElement.nextElementSibling;
      
      if (nextEl && nextEl.getAttribute('contenteditable') === 'false') {
        e.preventDefault();
      }
    }
  }
});

代码说明 #

• 仅监听Backspace和Delete键，不干扰其他正常输入操作
• 针对光标位置做精准判断：
  • 按下Backspace时，若光标在可编辑内容开头且紧邻不可编辑元素，阻止删除行为
  • 按下Delete时，若光标在可编辑内容末尾且紧邻不可编辑元素，阻止删除行为
• 兼容光标在文本节点和元素节点的场景，覆盖更多使用情况

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