移动端 安卓输入框设置宽高为 0 引发的 bug

场景

在移动端做了一个验证码输入框的页面，页面中的输入框是自己模拟的，页面中隐藏了一个原生的 input 框进行数字的输入。

输入框页面

页面上的 6 个下划线输入框其实是 6 个 div。
在页面上隐藏的输入框的 css

.hidden-input {
  position: absolute;
  top: -100px;
  height: 0;
  width: 0;
}

bug 现象

在苹果手机上打开页面，点击模拟的输入框，输入数字，数字可以正常展示到对应的格子上。在安卓手机上，输入数字，发现数字展示的顺序是反着来的，且没有办法删除。

原因

当隐藏的原生输入框设置的 css 样式的 height 和 width 都为 0 时。发现当点击虚拟输入框到 focus 到原生输入框上，输入框的光标始终处于输入框最前面，然后每次输入新的数字都相当于在最前方添加，这也是导致输入完了删除没有效果的原因。

解决方法

把 css 上的 height 和 width 属性删除。

.hidden-input {
  position: absolute;
  top: -100px;
}