foreword
Recently received such a request to make an input box for a security code, limited to 6 digits, but each value written is an input box, a total of 6 input boxes, after the current input box writes a value, the cursor automatically Jump to the next input box, delete the value written in the current input box and then automatically jump to the previous input box.
Implementation ideas
First of all, we need keyup()to use document.getElementsByClassNamethe method to obtain domthe element after the user has finished inputting the characters through the event, get keythe and indexvalues of the current element, and determine whether the cursor jumps to the next input box ( focus) or the cursor is out of focus ( blur); keydown()The main purpose of the event is to prevent the problem that there will be multiple characters in an input box once the input is too fast. The properties and methods used in this chapter are as follows:
focus()
focus()The event occurs when an element gains focus (when the element is selected by mouse click or positioned by tabthe key ) focus. focus()The method triggers focusthe event , or specifies focusa function to run when the event occurs.
blur()
blurOccurs when an element loses focus . blur()The method triggers blurthe event , or specifies blura function to run when the event occurs.
keyup()
keyup()The method triggers keyupthe event , or specifies keyupa function to run when the event occurs.
keydown()
keydownEvent fired when a keyboard key is pressed . It should be noted that keydown()is triggered when the keyboard is pressed, but keyup()will be triggered when the keyboard is released.
document.getElementsByClassName()
getElementsByClassName()The method returns a collection of all elements of the specified class name in the document, as NodeListobjects . NodeListobject representing an ordered list of nodes. NodeListObject We can access the nodes in the list by the node index number in the node list (the index number starts from 0).
full source code
<template>
<div class="parentBox">
<div v-for="(item, index) in inputList" :key="index">
<input type="text" v-model="item.pinless" class="inputValue" @keyup="keyboard($event, index)" @keydown="expurgate(index)" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 输入框循环的数组
inputList: [
{
pinless: "" },
{
pinless: "" },
{
pinless: "" },
{
pinless: "" },
{
pinless: "" },
{
pinless: "" },
],
value: "", //输入的值
};
},
methods: {
// 键盘松开事件
keyboard(e, index) {
let domNode = document.getElementsByClassName("inputValue"),
currInput = domNode[index],
nextInput = domNode[index + 1],
lastInput = domNode[index - 1];
if (e.keyCode != 8) {
if (index < this.inputList.length - 1) {
nextInput.focus();
} else {
currInput.blur();
}
} else {
if (index != 0) {
lastInput.focus();
}
}
let val = [];
this.inputList.forEach((item) => {
val.push(item.pinless);
});
this.value = val.join("");
console.log(this.value);
},
// 键盘按下触发
expurgate(index) {
this.inputList[index].pinless = "";
},
},
};
</script>
<style scoped>
.parentBox {
padding: 20px;
display: flex;
}
.parentBox div:nth-child(n + 2) {
margin-left: 4px;
}
input {
color: #606266;
font-size: 18px;
text-align: center;
width: 54px;
height: 62px;
border: 2px solid gainsboro;
border-radius: 4px;
}
</style>
achieve effect
