vue实现输入框自动跳转功能(类似支付密码)
< template>
< div class = " inputClass" >
< div v-for = " (item,index) in list" :key = " index" >
< input v-model = " item.value" type = " password" class = " inputBorder" @keyup = " jumpNext($event,index,item.value)"
@keydown = " replaceValue(index)" >
</ div>
</ div>
</ template>
jumpNext ( event, index, val) {
if ( ! /[0-9]/ . test ( val) ) {
this . list[ index] . value = "" ;
this . $message ( {
type: 'warning' ,
message: '该密码仅为数字'
} )
return
}
let flag = document. getElementsByClassName ( "inputBorder" ) ,
currInput = flag[ index] ,
nextInput = flag[ index + 1 ] ,
lastInput = flag[ index - 1 ] ;
if ( event. keyCode != 8 ) {
if ( index < ( this . list. length - 1 ) ) {
nextInput. focus ( ) ;
} else {
currInput. blur ( ) ;
}
} else {
if ( index != 0 ) {
lastInput. focus ( ) ;
}
}
if ( index == 0 ) {
this . num1 = event. key + ''
} else if ( index == 1 ) {
this . num2 = event. key + ''
} else if ( index == 2 ) {
this . num3 = event. key + ''
} else if ( index == 3 ) {
this . num4 = event. key + ''
} else if ( index == 4 ) {
this . num5 = event. key + ''
} else if ( index == 5 ) {
this . num6 = event. key + ''
}
let str = this . num1 + this . num2 + this . num3 + this . num4 + this . num5 + this . num6
if ( str. length == 6 ) {
let params = str
setUpSVIP ( params) . then ( res => {
} ) . catch ( err => {
this . $message ( {
type: 'error' ,
message: '设置超级VIP失败'
} )
} )
}
} ,
replaceValue ( index) {
this . list[ index] . value = "" ;
}
.inputBorder {
background : #ffffff;
width : 50px;
font-size : 50px;
height : 50px;
margin-left : 0px;
margin-right : 0px;
text-align : center;
border : 1px solid #706969;
}
.inputClass {
margin-top : 31px;
display : flex;
justify-content : center;
}