JS实现手机端输入验证码的方法
这篇文章主要讲解了JS实现手机端输入验证码的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
创新互联建站长期为超过千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为安仁企业提供专业的成都网站制作、网站设计,安仁网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
想法:
1、使用label标签做显示验证码的框,
2、然后每个label for属性指向同一个 id 为vcode 的input,
3、为了能够触发input焦点, 将input 改透明度样式隐藏,
4、这样就实现了 点击label触发 input焦点,调用键盘。
运行效果:
示例代码:
结构部分html:
验证码:
css部分:
Javascript部分
1、通过cdn引入vue.js
2、代码
var app = new Vue({ el: '#app', data: { code: '', codeLength: 6, telDisabled: false, focused: false }, computed: { codeArr() { return this.code.split('') }, cursorIndex() { return this.code.length } }, watch: { code(newVal) { this.code = newVal.replace(/[^\d]/g,'') if (newVal.length > 5) { // this.telDisabled = true this.$refs.vcode.blur() setTimeout(() => { alert(`vcode: ${this.code}`) }, 500) } } }, })
看完上述内容,是不是对JS实现手机端输入验证码的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
网页标题:JS实现手机端输入验证码的方法
文章分享:http://scyanting.com/article/jjsipg.html