语义正确且适配移动端的短信验证码输入框应使用 ，避免用 text 或 number；发送按钮需点击即禁用并启动倒计时，配合 visibilitychange 事件处理页面切后台场景。
短信验证码输入框怎么写语义正确又适配移动端
直接用 ，别用 text 或 number。前者触发手机数字键盘且不强制校验格式，后者在 iOS 上会自动补零、触发科学计数法或屏蔽粘贴，text 则无法唤起带“完成”键的精简键盘。
必须加 inputmode="numeric" 和 autocomplete="one-time-code"：前者明确告诉浏览器“我要输数字”，后者让支持的系统（Chrome 88+、Safari 16.4+）自动识别并弹出验证码建议栏。
常见错误：
• 忘记设 maxlength（通常为 6）导致用户多输；
• 用 pattern="[0-9]*" 做前端校验——它只影响表单提交，且在部分安卓键盘下反而禁用粘贴；
• 把多个 input 拆成独立框再用 JS 聚焦联动——增加复杂度，还容易被密码管理器误识别。
发送按钮点击后禁用与倒计时实现要点
按钮点击即设 disabled，同时启动倒计时，不是等接口返回成功才禁用。否则网络延迟或重复点击会导致多次请求。
倒计时逻辑要兼顾两点：
• 时间结束必须清除定时器（避免内存泄漏）；
• 页面切后台再切回时，倒计时不能卡住——用 visibilitychange 事件暂停/恢复，或改用服务端时间戳比对（更准但需额外 API 支持）。
示例关键代码：
let timer;<br>const btn = document.querySelector('#send-btn');<br>btn.addEventListener('click', () => {<br> if (btn.disabled) return;<br> btn.disabled = true;<br> let sec = 60;<br> btn.textContent = `${sec}s 后重发`;<br> timer = setInterval(() => {<br> sec--;<br> if (sec clearInterval(timer);<br> btn.disabled = false;<br> btn.textContent = '发送验证码';<br> } else {<br> btn.textContent = `${sec}s 后重发`;<br> }<br> }, 1000);<br>});
为什么不能只靠前端限制发送频率
前端禁用按钮只是体验优化，完全不可信。用户可刷新页面、禁用 JS、抓包重放请求。真实防刷必须依赖服务端：
- 同一手机号 60 秒内只允许一次发送，用 Redis 的
SET key value EX 60 NX原子操作实现； - 单 IP 或设备指纹每分钟限 3 次，防止撞库式轰炸；
- 验证码生成后立即存入缓存并设置 5 分钟过期，验证时比对并
DEL，避免重放。
漏掉任意一点，都可能被脚本批量调用接口，导致短信通道被封或资费暴增。
输入框失焦时没填满就自动提交？这是 focusout 的坑
别监听 focusout 或 blur 触发校验/提交——用户从一个输入框切到另一个，或点空白处，都会触发，极易误提交。
正确做法：
• 提交动作只绑定在「确定」按钮或回车（Enter 键）；
• 输入过程中用 input 事件做实时长度判断（如填满 6 位后高亮按钮），但不自动提交；
• 若真需要离开时校验，加防抖（debounce）且仅对「离开页面」场景（beforeunload）提示，不自动提交。
另外，iOS Safari 在软键盘收起瞬间会触发一次 focusout，此时若没做节流，可能造成重复请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
