vue实现输入框自动跳转功能

本文实例为大家分享了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>

JS:

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 => {

// this.superVipVisible = false

}).catch(err => {

// this.superVipVisible = false

this.$message({

type: 'error',

message: '设置超级VIP失败'

})

})

}

},

/*当键盘按下的时候清空原有的数*/

replaceValue(index) {

this.list[index].value = "";

}

CSS:

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

}

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

以上是 vue实现输入框自动跳转功能 的全部内容, 来源链接: utcz.com/p/237299.html

回到顶部