vue实现短信验证码输入框
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了vue实现短信验证码输入框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现短信验证码输入框的具体代码,供大家参考,具体内容如下
先上最终效果 (此处代码显示的是短信验证码框的效果 其余部分并未放上去)
html
<div class="code"> <input id="first" class="inputStyle" v-model="code[0]" style="border--left-radius: 12px; border-bottom-left-radius: 12px;" type="text"/> <input id="second" class="inputStyle" v-model="code[1]"style="border-left:1px solid #c6c6c6;" type="text"/> <input id="third" class="inputStyle" v-model="code[2]"style="border-left:1px solid #c6c6c6;" type="text"/> <input id="forth" class="inputStyle" v-model="code[3]" style="border-left:1px solid #c6c6c6;" type="text"/> <input id="fifth"class="inputStyle" v-model="code[4]" style="border--right-radius: 12px; border-bottom-right-radius: 12px; border-left:1px solid #c6c6c6;" maxlength="1" type="text"/> </div>
js
data (){ return { smsCode:'', code:new Array(5), codeId:['first','second','third','forth','fifth'] } }, watch:{ code:function(newValue,oldValue){ console.log('newValue.length'+newValue.length) let tempValue='' for(let i=0;i<newValue.length;i++){ if(i==5){ console.log(i) break } if(newValue[i]){ tempValue=tempValue+newValue[i] } } this.smsCode=tempValue console.log('smsCode '+this.smsCode) let m=tempValue.split("") let location=0 for(let i=0;i<newValue.length;i++){ if(m[i]&&i<5){ location++ newValue[i]=m[i] }else{ newValue[i]='' } } // console.log(this.codeId[i]) if(location<1){ location=1 }else if(location>5){ location=5 } document.getElementById(this.codeId[location-1]).focus() } },
CSS
.inputStyle{ width:20%; height:100%; text-align:center; border:none; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:es6函数之rest参数用法实例分析
下一篇:JS监听组合按键思路及实现过程
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程