欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue实现短信验证码输入框

程序员文章站 2022-04-06 13:33:57
本文实例为大家分享了vue实现短信验证码输入框的具体代码,供大家参考,具体内容如下先上最终效果 (此处代码显示的是短信验证码框的效果 其余部分并未放上去)html

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

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

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。