当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue实现短信验证码输入框

vue实现短信验证码输入框

2020年06月23日  | 移动技术网IT编程  | 我要评论

贺捷生,朴奉珠,执掌盛唐

本文实例为大家分享了vue实现短信验证码输入框的具体代码，供大家参考，具体内容如下

先上最终效果 （此处代码显示的是短信验证码框的效果   其余部分并未放上去）

html

<div class="code">
  <input id="first" class="inputstyle" v-model="code[0]"
  style="border-top-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-top-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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网