oninput 在值变更时立即触发，onchange 需值变且失焦才触发；oninput 不支持 select；绑定推荐 addeventlistener；修改 value 易致光标错位，需保存恢复位置；移动端需配合 composition 事件处理输入法延迟。
oninput 属性用来捕获用户对 <input> 或 <textarea></textarea> 的**每次值变更**，只要内容一变就立刻触发，不等失焦、不等回车。它不是“可有可无的装饰”，而是实现即时反馈逻辑的底层支点。
oninput 和 onchange 触发时机差在哪
根本区别就一条：值一改就执行 vs 值改完+失焦才执行。
-
oninput：按一个键、删一个字、粘贴一段、用鼠标选中后删掉——全算“值变更”，全部触发 -
onchange：必须满足两个条件——值确实变了 + 元素失去焦点（比如点了别处、按了 Tab） - 对
<select></select>来说，onchange会立即触发（选完即生效），但oninput不支持该标签，直接忽略
怎么给 input 绑定 oninput 逻辑
两种主流方式，行为一致但扩展性不同。
- 内联写法：
<input type="text" oninput="handleInput(this.value)">—— 简单直接，适合单行脚本或原型验证 - JS 动态绑定：
el.addEventListener('input', handler)—— 推荐用于正式项目，支持多次添加、便于解绑、避免污染 HTML 结构 - 注意：
el.oninput = handler是赋值式绑定，后设会覆盖前设；而addEventListener可叠加多个 handler
实时过滤输入内容时容易踩的坑
常见需求如“只允许数字”“限制长度”“屏蔽特殊字符”，但直接在 oninput 里改 this.value 会导致光标跳到末尾。
- 问题根源：修改
value后浏览器重置光标位置，尤其在中间编辑时体验极差 - 缓解办法：先保存光标位置（
selectionStart/selectionEnd），再赋值，最后恢复位置 - 更稳妥做法：用
input事件监听 +preventDefault()配合setRangeText()控制输入流（需兼容性判断） - 简单场景下，可用
pattern+title做前端提示，把强过滤交给后端或提交时校验
移动端 oninput 的兼容性和延迟问题
Android WebView 和部分旧版 iOS Safari 存在输入延迟或漏触发现象，尤其配合中文输入法时。
- 典型表现：拼音未上屏前不触发，选词完成才触发一次；或者连续快速输入只触发最后一次
- 原因：输入法处于“合成状态”，DOM 值尚未更新，
oninput暂不响应 - 补救方案：监听
compositionstart/compositionend事件，在合成结束时手动触发校验逻辑 - 不要依赖
oninput做关键业务拦截（如密码强度实时检测），应结合blur或提交时双重确认
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
