js实现游标
游标的基本概念
游标（Cursor）在JavaScript中通常指代用户在界面上的指针位置或文本选择范围。可以通过DOM API获取或操作游标位置，常见于输入框、富文本编辑器等场景。
获取输入框游标位置
使用selectionStart和selectionEnd属性获取输入框当前光标位置或选中文本范围：
const input = document.getElementById('myInput');
const cursorPos = input.selectionStart; // 获取光标开始位置
const selectionEnd = input.selectionEnd; // 获取光标结束位置设置输入框游标位置
通过setSelectionRange()方法设置光标位置或选中范围：
input.setSelectionRange(3, 5); // 将光标定位在第3到第5字符之间（选中状态）
input.setSelectionRange(3, 3); // 将光标定位在第3字符后（非选中）可编辑元素的游标控制
对于contentEditable元素或富文本编辑器，需要使用Selection和Range API：
const editableDiv = document.getElementById('editable');
const selection = window.getSelection();
const range = document.createRange();
range.setStart(editableDiv.childNodes[0], 5); // 从第1个子节点的第5字符开始
range.setEnd(editableDiv.childNodes[0], 10); // 到第1个子节点的第10字符结束
selection.removeAllRanges();
selection.addRange(range);保存与恢复游标位置
需要保存游标状态时，可记录节点和偏移量：
const savedRange = range.cloneRange(); // 克隆当前Range对象
// 恢复时
selection.removeAllRanges();
selection.addRange(savedRange);跨浏览器兼容方案
不同浏览器对游标API的实现有差异，推荐使用规范化库：
- 对于输入框：使用
input.selectionStart/End - 对于富文本：使用rangy.js等库处理兼容性
实际应用示例
自动聚焦并定位到输入框末尾：
function focusAtEnd(inputElement) {
inputElement.focus();
const len = inputElement.value.length;
inputElement.setSelectionRange(len, len);
}通过上述方法可以实现精确的游标控制，适用于表单校验、代码编辑器、实时预览等需要精细控制输入位置的场景。
