插入span元素后如何恢复默认文本颜色？后续输入仍继承span颜色

你遇到的问题是：在contenteditable div里插入红色span后，不管在span后面输入什么，都会继承红色，没法回到默认文本颜色。这是浏览器在编辑可富文本元素时的默认行为——光标所在位置的样式会被新输入的内容继承。

下面给你两种可行的解决办法：

方法一：插入span后将光标移到无样式的空白节点 #

修改你的JS代码，在插入的span后面加一个空的文本节点，然后把光标定位到这个节点上，这样后续输入就会用默认样式：

function insertSpan() {
  var span = document.createElement("span");
  span.style.color = "red";
  var r = getSelection().getRangeAt(0);
  r.surroundContents(span);
  span.textContent = "<insert text>";

  // 在span后面插入空文本节点
  const emptyNode = document.createTextNode("");
  span.parentNode.insertBefore(emptyNode, span.nextSibling);

  // 把光标移到空节点上
  const newRange = document.createRange();
  newRange.setStartAfter(span);
  newRange.collapse(true);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(newRange);

  document.querySelector("div").focus();
}

HTML代码保持不变：

<div contenteditable>Your text here</div>
<button onclick="insertSpan()">Insert span</button>

方法二：用CSS类管理样式+确保光标位置 #

先给contenteditable元素设置默认文本颜色，然后用类给span加红色，避免内联样式的强继承：

div[contenteditable] {
  color: #333; /* 自定义默认文本颜色 */
}
div[contenteditable] .red-highlight {
  color: red;
}

然后修改JS代码，用类代替内联样式，同时依然加上光标定位的逻辑：

function insertSpan() {
  var span = document.createElement("span");
  span.classList.add("red-highlight"); // 用类代替内联样式
  var r = getSelection().getRangeAt(0);
  r.surroundContents(span);
  span.textContent = "<insert text>";

  // 同样插入空节点并定位光标
  const emptyNode = document.createTextNode("");
  span.parentNode.insertBefore(emptyNode, span.nextSibling);

  const newRange = document.createRange();
  newRange.setStartAfter(span);
  newRange.collapse(true);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(newRange);

  document.querySelector("div").focus();
}

这样两种方法都能解决后续文本继承span颜色的问题，第一种更直接，第二种更利于样式的统一管理。

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