实现一个好用又漂亮的验证码/证件号输入框组件

[qppq54s]

需求内容

功能：实现自定义的输入框组件，限制可以输入英文或者数字，长度限制为4位。
美观：4个输入框单独展示【】【】【】【】

实现

方案1

四个单独的input框，限制只能输入英文或数字。
问题： 切换输入框时，ios键盘会重制，导致ios手机使用系统默认键盘时，如果输入4个数字，需要多次切换输入法，体验不好。

方案2

自己写四个假的输入框，同时写一个input组件，并通过opacity：0设置为透明
问题：在ios手机上，使用中文键盘输入时，待选英文之间存在空格，假的输入框如果和input内容一直，容易令人疑惑。

方案3

此方案基于方案二优化，因中文键盘原因，最好能限制ios系统键盘唤出时，只支持输入英文或数字。当input组件的type设置为password时，ios系统键盘会唤起密码输入特殊键盘，只包括英文数字和特殊字符，只需过滤特殊字符即可。