vue实现验证码输入框组件
发布时间：2020-12-17 02:40:34 所属栏目：百科 来源：网络整理
导读：先来看波完成效果图 需求 输入4位或6位短信验证码，输入完成后收起键盘 实现步骤 第一步 布局排版 使用li元素来模拟输入框的显示，没有别的目的，就只是为了语义化，当然你也可以使用其他任意一个元素来模拟，比如div。 使用label标签的好处在于它可以跟inpu
|
先来看波完成效果图
需求输入4位或6位短信验证码，输入完成后收起键盘 实现步骤第一步 布局排版 使用li元素来模拟输入框的显示，没有别的目的，就只是为了语义化，当然你也可以使用其他任意一个元素来模拟，比如div。 使用label标签的好处在于它可以跟input的click事件关联上，一方面实现了语义化解决方案，另一方面也省去了我们通过js来唤起虚拟键盘。 隐藏输入框 将真实的输入框定位到屏幕可视区域以外的地方，虚拟键盘被唤起时，就不会将页面往上顶了。所以你的验证码输入组件一定要放在虚拟键盘遮挡不了的地方。 第二步 处理验证码输入 = this.number) {
this.hideKeyboard()
}
this.handleSubmit()
}
输入时，给输入框赋一次值，是为了解决android端上输入框失焦后重新聚焦，输入光标会定在第一位的前面，经过赋值再聚焦，光标的位置就会显示在最后一位后面。 第三步 完成输入后关闭虚拟键盘 组件完整代码 |
