vue实现验证码输入框组件

前端之家收集整理的这篇文章主要介绍了vue实现验证码输入框组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先来看波完成效果

需求

输入4位或6位短信验证码,输入完成后收起键盘

实现步骤

第一步

布局排版

使用li元素来模拟输入框的显示,没有别的目的,就只是为了语义化,当然你也可以使用其他任意一个元素来模拟,比如div。

使用label标签的好处在于它可以跟input的click事件关联上,一方面实现了语义化解决方案,另一方面也省去了我们通过js来唤起虚拟键盘

隐藏输入框

将真实的输入框定位到屏幕可视区域以外的地方,虚拟键盘被唤起时,就不会将页面往上顶了。所以你的验证码输入组件一定要放在虚拟键盘遮挡不了的地方。

第二步

处理验证码输入

= this.number) { this.hideKeyboard() } this.handleSubmit() }

输入时,给输入框赋一次值,是为了解决android端上输入框失焦后重新聚焦,输入光标会定在第一位的前面,经过赋值再聚焦,光标的位置就会显示在最后一位后面。

第三步

完成输入后关闭虚拟键盘

键盘 document.activeElement.blur() // ios隐藏键盘 this.$refs.input.blur() // android隐藏键盘 }

组件完整代码