contenteditable子元素删除后浏览器仍记忆的问题及解决需求

问题现象 #

当contenteditable元素内的<font>标签被完全删除（通过开发者工具确认标签已消失），再次输入内容时该标签会自动重新出现，此问题在Firefox和Chrome中均已验证。示例代码：

<div contenteditable="true">
  <font color="#f00">
    backspace this whole line of text, 
    inspect the html to see that the `font` tag is gone, 
    then type to watch it magically reappear
  </font>
</div>

需求1：删除font标签后输入不再复用该标签 #

要解决这个问题，核心是清除浏览器对之前格式的记忆，让光标处于纯文本上下文：

• 方案一：监听退格键，当元素被清空时手动插入空白文本节点

  const editable = document.querySelector('[contenteditable="true"]');
  editable.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && editable.innerHTML.trim() === '') {
      editable.innerHTML = '';
      const textNode = document.createTextNode('');
      editable.appendChild(textNode);
      // 定位光标到空白文本节点
      const range = document.createRange();
      const sel = window.getSelection();
      range.setStart(textNode, 0);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  });
  

• 方案二：监听输入事件，元素为空时强制清空所有格式

  const editable = document.querySelector('[contenteditable="true"]');
  editable.addEventListener('input', () => {
    if (editable.innerHTML.trim() === '') {
      editable.innerHTML = '';
    }
  });
  

需求2：修改浏览器存储的「当前标签」信息 #

浏览器维护的contenteditable格式上下文是内部私有状态，没有原生API允许直接访问或修改它，必须通过JS干预实现格式切换：

• 方案一：聚焦时预先插入目标格式标签

  const editable = document.querySelector('[contenteditable="true"]');
  editable.addEventListener('focus', () => {
    if (editable.innerHTML.trim() === '') {
      // 插入蓝色font标签并定位光标
      editable.innerHTML = '<font color="#00f"></font>';
      const font = editable.querySelector('font');
      const range = document.createRange();
      const sel = window.getSelection();
      range.setStart(font, 0);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  });
  

• 方案二：使用execCommand切换当前格式（API已废弃但仍被主流浏览器支持）

  // 将当前输入格式切换为蓝色
  document.execCommand('foreColor', false, '#00f');
  

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