使用 React 实现 6 个输入框的短信验证码功能
原文中文，约2900字，阅读约需7分钟。
📝
内容提要
在移动端中，实现短信验证码功能有两种主流方案：每个数字单独占用一个输入框和透明输入框。第一种方案存在操作系统自动填充验证码的问题，体验不友好。第二种方案光标无法随意切换，但相对来说更接受。没有完美的方案，只能在某些方面做取舍。
🔎
延伸解读
自动填充带来的兼容性挑战
第一种方案中，每个输入框限制长度为1，但iOS等操作系统会自动填充验证码，将所有数字填入第一个输入框，导致功能异常。这反映了移动端开发中系统级自动填充与自定义输入组件之间的冲突，开发者需考虑系统行为对交互的影响。
透明输入框的取舍：光标灵活性
第二种方案使用透明输入框覆盖展示框，虽然避免了自动填充问题，但用户无法随意切换光标修改中间某位数字，只能删除后续内容重新输入。这种限制降低了编辑效率，但相比第一种方案的自动填充问题，整体体验更可接受。
实现细节：光标闪烁与输入同步
透明输入框方案中，光标闪烁位置由已输入验证码长度决定，通过判断当前索引是否等于验证码长度（不超过最大长度减一）且输入框获得焦点来设置active类。这确保了视觉反馈与输入进度同步，但无法实现点击任意框定位光标。
❓
Q&A
短信验证码功能的两种主流实现方案是什么？
短信验证码功能的两种主流实现方案是：每个数字单独占用一个输入框和使用透明输入框。
每个数字单独占用一个输入框的优缺点是什么？
优点是每个输入框对应一个数字，缺点是存在操作系统自动填充验证码的问题，用户体验不佳。
透明输入框的用户体验如何？
透明输入框的用户体验相对可接受，但光标无法随意切换，修改输入时不方便。
开发者在实现短信验证码功能时需要考虑什么？
开发者需要在不同方案中做出取舍，因为没有完美的方案。
为什么第一种方案的用户体验不佳？
因为某些操作系统会自动填充验证码到第一个输入框，导致用户体验极度不友好。
透明输入框的实现方式是什么？
透明输入框在灰色框框上放置一个透明的输入框，用户通过该输入框输入验证码。
🏷️
