H5实现支付密码输入框（vue3）

微信、支付宝支付密码时的密码输入框大家都很熟悉，它由6个小格子组成，输入一个密码后会自动跳转到另一个格子，密码输入完成后就可以提交数据，在web并没有原生的这种输入框，要想使用这种输入框需要自己去实现。

最近的一个项目中需要使用这种输入框，由于项目比较小，因此就没有用其他的UI库，于是就自己造了一个密码输入框的轮子，效果如下图：

安卓设备：

iOS设备：

在ios上有一个小小的问题：输入框获得焦点后无法自动弹窗软键盘，有大神知道解决方法的话请评论区留言告知！！

1、DOM结构

dom结构这块比较简单，主要由：

1. 隐藏的input
   主要作用是：调起系统软键盘以及输入内容
2. 6个小格子
3. 虚拟光标

3部分组成。