js实现光标

获取光标位置

通过 document.getSelection() 方法获取当前光标对象，再调用 getRangeAt(0) 获取光标所在的文本范围（Range）。

const selection = document.getSelection();
const range = selection.getRangeAt(0);
const cursorPosition = range.startOffset; // 光标在节点中的偏移量

设置光标位置

创建一个新的 Range 对象，指定目标节点和偏移量，再通过 Selection 的 removeAllRanges() 和 addRange() 方法移动光标。

const targetNode = document.getElementById("text");
const newRange = document.createRange();
newRange.setStart(targetNode, 3); // 设置起始位置
newRange.setEnd(targetNode, 3);   // 设置结束位置（闭合范围）

const selection = document.getSelection();
selection.removeAllRanges();
selection.addRange(newRange);

插入内容到光标处

通过 Range 的 insertNode() 方法在光标位置插入文本或元素。

const selection = document.getSelection();
const range = selection.getRangeAt(0);
const newNode = document.createTextNode("插入的文本");
range.insertNode(newNode);

保存与恢复光标位置

使用 Range 和 Selection 对象保存当前光标状态，后续可通过恢复范围重新定位。

// 保存光标
let savedRange = document.getSelection().getRangeAt(0).cloneRange();

// 恢复光标
const selection = document.getSelection();
selection.removeAllRanges();
selection.addRange(savedRange);

监听光标事件

通过 mouseup、keyup 或 selectionchange 事件实时获取光标位置变化。

document.addEventListener("selectionchange", () => {
  const selection = document.getSelection();
  console.log("当前光标位置:", selection.getRangeAt(0).startOffset);
});

兼容性说明

• Selection 和 Range API 在现代浏览器中支持良好。
• 对于老旧浏览器（如 IE8 及以下），需使用 document.selection 替代 document.getSelection()。

示例：在输入框移动光标

针对 <input> 或 <textarea>，可直接使用 selectionStart 和 selectionEnd 属性。

const input = document.querySelector("input");
input.selectionStart = 5; // 设置光标起始位置
input.selectionEnd = 5;   // 设置光标结束位置