uni-app自定义密码输入框

最近在用 uni-app开发时遇到一个类似微信支付的密码框需求，要求：用户输入密码后自动向后跳转一个输入框，并且获得焦点，直到输入完毕。用户删除时，删除完当前输入框的内容，再按一个“退格/删除”键，则自动往前跳一个输入框，并将其内容删除。

效果如：

实现思路

1. 有且只能有一个input输入框
   如果采用一个方框用一个input输入框，在模拟器里没有什么问题，但在真实的手机中会出现软件盘弹起不了问题。
2. 肉眼看到的输入框(方框)是虚拟的，光标也是虚拟的
3. input输入框的大小与方框大小一致，字体大小保持一致，字体颜色为透明，设置字体颜色为透明后输入框的光标也会随之消失
4. 光标移动到哪个方框，input输入框也要随之移动
5. input输入框限制最多只能输入2个字符，如果只有一个字符则要在该字符前面补一个空格
   因为要实现当前输入框的值删除掉后再按一个“退格/删除”键当前输入框的前一个输入框的值也要删除掉功能
6. 用户在方框中输入一个字符后，input输入框立即移动到下一个方框，并且清空input输入框
7. 删除行为，在input输入框中使用input事件来模拟“退格/删除”行为

代码实现

template

javascript

css

遗留问题

以上代码有个最大的问题就是：input输入框的type只能为text，因为在实现的时候输入框的值前面会加上一个空格
如哪位大佬有更好的实现方式，请告知！万分感谢！