应监听 input 事件实现输入框实时格式化，因其可捕获键盘、粘贴、语音等所有输入源；需防抖或比对值以应对 android 快速输入；修改 value 时须保存并恢复光标位置，避免跳脱。
输入框内容实时格式化该用哪个事件
直接监听 input 事件，不是 change 或 blur。后者只在失焦或提交时触发，无法实现“边输边格式化”的体验。iOS Safari 对 input 事件支持稳定，但要注意：在部分 Android 输入法下，连续快速输入可能触发多次，需防抖或做值比对。
关键点：
-
input事件能捕获所有输入来源（键盘、粘贴、语音、自动填充） - 避免在
change里做格式化——用户还没输完就看不到效果 - 若用
keydown，会漏掉粘贴和 IME 输入，不可靠
如何安全地修改 input.value 而不破坏光标位置
直接赋值 input.value = formatted 会导致光标跳到末尾，尤其在中间编辑时体验极差。必须手动保存并恢复光标位置。
实操建议：
- 在格式化前用
input.selectionStart和input.selectionEnd记录光标范围 - 格式化后，根据新字符串长度和原光标偏移，计算新位置（注意：中文、emoji、全角字符会影响字节长度判断）
- 简单场景可用
setSelectionRange()恢复，但需确保新字符串长度 ≥ 原光标位置，否则设为Math.min(newLength, cursor) - 推荐用现成库如
input-format或封装好的formatInput()工具函数，避免重复踩坑
电话号码、身份证、金额等常见格式的正则与边界处理
别用一个正则从头匹配整个字符串——它没法应对“删一位、插一位”这种动态编辑。应聚焦于“当前输入片段”的局部修正。
示例（手机号）：
function formatPhone(value) {
const digits = value.replace(/\D/g, '');
if (digits.length
<p>注意事项：</p>
- 身份证号校验必须后置（如
blur时），输入中只做分段（110101-19900307-XXXX），不实时校验第18位 - 金额输入慎用
toLocaleString()——它依赖 locale，且小数点/千分位符号在不同地区不同，建议统一用.和无千分位，或明确配置Intl.NumberFormat - 粘贴整段内容时，先
event.preventDefault()，再清理、格式化、重设值，否则格式会被破坏
React/Vue 中处理格式化的特殊约束
受控组件下，不能只改 DOM 的 value，必须同步更新 state，否则 React 会警告“输入框变为非受控”，Vue 可能丢失响应式绑定。
正确做法：
- React：在
onChange回调里调用setValue(formatPhone(e.target.value))，且确保value属性始终等于 state - Vue：用
v-model+@input修饰，或封装为自定义指令（v-format="phone"），避免在模板里直接写格式逻辑 - 注意：不要在
useEffect或watch里反向写入 input —— 这会引发循环触发 - 性能敏感场景（如每键触发），加
useCallback缓存格式函数，避免每次渲染新建
selectionStart/End 做精准锚定。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
