<input
class="honderd"
v-for="(item, index) in inputList"
:key="item"
v-model="item.pinless"
@keyup="keyboard($event, index)"
@keydown="expurgate(index)"
label=""
/>
const inputList = ref([
{ pinless: '' },
{ pinless: '' },
{ pinless: '' },
{ pinless: '' },
{ pinless: '' },
{ pinless: '' }
]);
const keyboard = (e, index) => {
let domNode = document.getElementsByClassName('honderd'),
currInput = domNode[index],
nextInput = domNode[index + 1],
lastInput = domNode[index - 1];
console.log(domNode, 'domNodedomNode');
if (e.keyCode != 8) {
if (index < inputList.value.length - 1) {
console.log(nextInput, 'nextInput');
nextInput.focus();
} else {
currInput.blur();
}
} else {
if (index != 0) {
lastInput.focus();
}
}
};
const expurgate = (index) => {
inputList.value[index].pinless = '';
};
.honderd {
width: 40px;
height: 40px;
display: flex;
border: 1px solid #cacaca;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
font-weight: 400;
color: #3d3d3d;
margin-left: 8px;
:deep(.van-field__control) {
text-align: center;
}
}