selectionstart 和 selectionend 是 input/textarea 的只读属性，表示光标或选区起止索引；仅对文本型输入有效，需防护性读取，input 事件中需 settimeout 延迟获取，设置须用 setselectionrange()。
selectionStart 和 selectionEnd 是什么
它们是 <input> 和 <textarea></textarea> 元素的只读属性，返回当前光标在文本中的字符索引位置（从 0 开始）。selectionStart === selectionEnd 表示无选区、只有光标；否则表示有文本被选中，范围是 [selectionStart, selectionEnd)（左闭右开）。
注意：这两个属性对 type="password"、type="number" 等非文本型 <input> 在多数浏览器中**不可用或始终返回 0**，仅保证在 type="text"、type="search"、type="url"、type="email" 和 <textarea></textarea> 上可靠工作。
怎么安全读取 selectionStart/selectionEnd
直接访问可能报错（比如元素未 focus、DOM 未就绪、或 input 被禁用），所以得加防护：
- 确保元素是
<input type="text">或<textarea></textarea>，且disabled为false - 最好在
focus、click、input或mouseup后读取，避免异步时机偏差 - 用
try/catch包裹，或先检查属性是否存在（虽然现代浏览器基本都支持）
简单安全读法：
function getSelectionRange(el) {
if (!el || el.disabled || !['text', 'search', 'url', 'email', 'textarea'].includes(el.type)) {
return null;
}
try {
return { start: el.selectionStart, end: el.selectionEnd };
} catch {
return null;
}
}
为什么在 input 事件里取不到最新选区
input 事件触发时，浏览器**尚未更新 selectionStart/selectionEnd** —— 它们反映的是事件开始前的状态。例如用户按 Delete 删除一个字符后，input 触发时 selectionStart 还指向原位置，不是删除后的新光标点。
解决办法：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 改用
setTimeout(..., 0)延迟到微任务末尾再读（最常用） - 监听
select事件（仅适用于鼠标选中，不覆盖键盘操作） - 监听
mouseup+keyup组合（更全，但逻辑略重）
推荐写法（兼容性好、轻量）：
inputEl.addEventListener('input', () => {
setTimeout(() => {
const pos = getSelectionRange(inputEl);
console.log(pos); // 此时才是真实光标/选区
}, 0);
});
设置光标或选区要用 setSelectionRange()
不能直接赋值 selectionStart，必须调用 setSelectionRange(start, end, direction?) 方法。第三个参数可选："forward"、"backward" 或 "none"（控制光标朝向和是否反向选中）。
常见坑：
- 目标元素必须已
focus，否则无效（可先el.focus()） -
start和end超出文本长度会被自动截断（如设成100，实际文本只有 5 个字符，则按 5 处理） - 在
compositionstart中调用可能干扰中文输入法，慎用
把光标移到末尾：
inputEl.focus(); inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
真正难处理的是输入法场景和移动端兼容性——比如 iOS Safari 在软键盘弹起时可能重置选区，或者 Chrome Android 对 setSelectionRange 的响应延迟。这些没法靠单个 API 解决，得结合 focusin、blur 和定时轮询兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
