contenteditable 光标位置怎么总是乱跳？

闲人雯婷提问于 2026-02-27 14:22:21 阅读 25

交互

我在用 contenteditable="true" 做一个简单的富文本编辑器，但每次输入完内容或者插入 HTML 后，光标就会莫名其妙地跳到开头或者末尾，根本没法连续编辑。

我试过用 document.execCommand 插入内容，也试过直接操作 innerHTML，结果都一样。比如下面这段代码：

const el = document.querySelector('[contenteditable]');
el.innerHTML += '<strong>新内容</strong>';
el.focus();

加了 focus() 也没用，光标还是不听话。有没有办法在插入内容后把光标精准定位到刚插入的内容后面？

富文本编辑

我来解答赞 7 收藏

反馈

1 条解答

百里菲菲 Lv1

应该能用 Range API 手动控制光标位置，别光 focus，得保存插入前的光标再插完还原：

function saveSelection() {

  const sel = window.getSelection();

  if (sel.rangeCount === 0) return null;

  const range = sel.getRangeAt(0);

  return {

    startContainer: range.startContainer,

    startOffset: range.startOffset,

    endContainer: range.endContainer,

    endOffset: range.endOffset

  };

}



function restoreSelection(saved) {

  if (!saved) return;

  const sel = window.getSelection();

  const range = document.createRange();

  range.setStart(saved.startContainer, saved.startOffset);

  range.setEnd(saved.endContainer, saved.endOffset);

  sel.removeAllRanges();

  sel.addRange(range);

}



// 使用示例

const el = document.querySelector('[contenteditable]');

const saved = saveSelection();

el.innerHTML += '新内容';

el.focus();

restoreSelection(saved);

2026-02-27 15:00