vue安全限制短信验证_vue实现短信验证码输入框

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

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

html

js

data (){

return {

smsCode:&＃39;&＃39;,

code:new Array(5),

codeId:[&＃39;first&＃39;,&＃39;second&＃39;,&＃39;third&＃39;,&＃39;forth&＃39;,&＃39;fifth&＃39;]

}

},

watch:{

code:function(newValue,oldValue){

console.log(&＃39;newValue.length&＃39;&＃43;newValue.length)

let tempValue&＃61;&＃39;&＃39;

for(let i&＃61;0;i

if(i&＃61;&＃61;5){

console.log(i)

break

}

if(newValue[i]){

tempValue&＃61;tempValue&＃43;newValue[i]

}

}

this.smsCode&＃61;tempValue

console.log(&＃39;smsCode &＃39;&＃43;this.smsCode)

let m&＃61;tempValue.split("")

let location&＃61;0

for(let i&＃61;0;i

if(m[i]&&i<5){

location&＃43;&＃43;

newValue[i]&＃61;m[i]

}else{

newValue[i]&＃61;&＃39;&＃39;

}

}

// console.log(this.codeId[i])

if(location<1){

location&＃61;1

}else if(location>5){

location&＃61;5

}

document.getElementById(this.codeId[location-1]).focus()

}

},

CSS

.inputStyle{

width:20%;

height:100%;

text-align:center;

border:none;

}

以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持脚本之家。