input光标控制必须用javascript的selectionstart/selectionend或setselectionrange()；type="number"因浏览器拦截导致光标失效，需改用type="text"+校验；调用前须focus()并等待完成；start/end需为合法整数；输入时需手动计算新光标位置；ie兼容已过时，现代浏览器均支持selectionstart；输入法未上屏时调用可能引发错位。
input 元素的光标位置不能靠 CSS 或 layout 控制，必须用 JavaScript 的 selectionStart/selectionEnd 属性或 setSelectionRange() 方法——这是唯一可靠、跨浏览器且符合标准的方式。
为什么 type="number" 里没法用 selectionStart
因为浏览器对 input[type="number"] 做了底层拦截：非数字输入被静默丢弃，同时重置光标到开头或末尾；此时 selectionStart 始终返回 0 或 value.length，读写都失效。这不是 bug，是规范行为。实际项目中若需光标控制（比如过滤后保留原位置），必须改用 type="text" + 手动校验。
setSelectionRange() 调用前必须 focus()
没聚焦的 input 没有可见光标，setSelectionRange() 会静默失败（部分浏览器抛错，部分直接忽略）。常见错误是：input 还在 DOM 中但未获得焦点，或异步更新值后立刻调用，却忘了先 focus()。
- 正确顺序：先
input.focus()→ 等待 focus 完成（可加setTimeout(..., 0)或requestAnimationFrame）→ 再setSelectionRange(start, end) -
start和end必须是整数，且满足0 ≤ start ≤ end ≤ input.value.length；超出范围会被自动截断，不报错但结果不符合预期 - 第三个参数
direction（可选值"forward"/"backward"/"none"）影响方向性选区，在中文输入法未上屏时可能触发异常，生产环境建议省略
输入过程中保持光标位置不跳变的关键点
当用户在中间修改内容（如插入、删除、格式化），光标容易被浏览器“重置”到末尾。本质是值变更后，浏览器默认把光标放最后。要维持原位，必须手动计算新位置并重设：
- 记录修改前的
selectionStart - 执行值变更（例如
input.value = newValue） - 计算新光标位置：若删了字符，新位置 = 原位置 − 被删字符数；若插入，需判断插入点是否在光标前
- 用
setSelectionRange(newPos, newPos)锁定单点光标（不是选中） - 注意 Vue/React 等框架中，值更新和 DOM 同步有延迟，务必在
$nextTick或useEffect的回调里操作 DOM
兼容 IE 的光标读取逻辑已过时，但仍有遗留系统需要
现代浏览器（Chrome/Firefox/Safari/Edge 79+）全部支持 selectionStart；IE 11 是最后一个还依赖 document.selection.createRange() 的主流版本。如果你的项目仍需支持 IE，必须做运行时判断：
function getCursorPos(input) {
if ('selectionStart' in input) {
return input.selectionStart;
}
// IE only
input.focus();
const range = document.selection.createRange();
const rangeCopy = range.duplicate();
rangeCopy.moveToElementText(input);
rangeCopy.setEndPoint('EndToEnd', range);
return rangeCopy.text.length - range.text.length;
}
不过，2026 年绝大多数真实线上环境已无必要兼容 IE —— 除非你维护的是银行或政务内网系统，否则直接用 selectionStart 即可。真正容易被忽略的，是输入法场景：在中文拼音未上屏时调用 setSelectionRange()，可能让光标卡在待选区，导致后续输入错位。这类问题只在真实用户高频输入时暴露，测试常遗漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
