使用 React 实现 6 个输入框的短信验证码功能
原文中文，约2900字，阅读约需7分钟。
📝
内容提要
在移动端中，实现短信验证码功能有两种主流方案：每个数字单独占用一个输入框和透明输入框。第一种方案存在操作系统自动填充验证码的问题，体验不友好。第二种方案光标无法随意切换，但相对来说更接受。没有完美的方案，只能在某些方面做取舍。
❓
Q&A
短信验证码功能的两种主流实现方案是什么？
短信验证码功能的两种主流实现方案是：每个数字单独占用一个输入框和使用透明输入框。
每个数字单独占用一个输入框的优缺点是什么？
优点是每个输入框对应一个数字，缺点是存在操作系统自动填充验证码的问题，用户体验不佳。
透明输入框的用户体验如何？
透明输入框的用户体验相对可接受，但光标无法随意切换，修改输入时不方便。
开发者在实现短信验证码功能时需要考虑什么？
开发者需要在不同方案中做出取舍，因为没有完美的方案。
为什么第一种方案的用户体验不佳？
因为某些操作系统会自动填充验证码到第一个输入框，导致用户体验极度不友好。
透明输入框的实现方式是什么？
透明输入框在灰色框框上放置一个透明的输入框，用户通过该输入框输入验证码。
🏷️
