Vue 实现输入框短信验证码功能

实现功能：

• 输入数字后，焦点自动跳转到下一个 input 上
• 按下删除键后，焦点自动跳转到上一个 input 上
• 按下 del 键，可以删除且焦点自动跳转到下一个 input 上
• 左右键可以移动焦点
• 粘贴长度为 6的文本后，自动将复制的文本赋值到 input 上

---

效果

---

代码

<template>
	<div class="g-remove-check-code">
		<p class="g-remove-check-code_title">已向绑定微信发送验证码</p>
		<div class="g-remove-check-code_content"
		     @keyup="fnCheckCodeKeyup"
		     @keydown="fnCheckCodeKeydown"
		     @paste="fnCheckCodeKeyPaste"
		     @input="fnCheckCodeInputEvent"
		>
		    <input :class="{'g-code-input_color': aCheckCodeInputComputed[0] !== ''}" max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="aCheckCodeInputComputed[0]" type="number" ref="firstInputRef" />
		    <input :class="{'g-code-input_color': aCheckCodeInputComputed[1] !== ''}" max="9" min="0" maxlength="1" data-index="1" v-model.trim.number="aCheckCodeInputComputed[1]" type="number" />
		    <input :class="{'g-code-input_color': aCheckCodeInputComputed[2] !== ''}" max="9" min="0" maxlength="1" data-index="2" v-model.trim.number="aCheckCodeInputComputed[2]" type="number" />
		    <input :class="{'g-code-input_color': aCheckCodeInputComputed[3] !== ''}" max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="aCheckCodeInputComputed[3]" type="number" />
		    <input :class="{'g-code-input_color': aCheckCodeInputComputed[4] !== ''}" max="9" min="0" maxlength="1" data-index="4" v-model.trim.number="aCheckCodeInputComputed[4]" type="number" />
		    <input :class="{'g-code-input_color': aCheckCodeInputComputed[5] !== ''}" max="9" min="0" maxlength="1" data-index="5" v-model.trim.number="aCheckCodeInputComputed[5]" type="number" />
		</div>
		<p class="g-remove-check-code_tip">请输入六位数验证码</p>
</div>
</template>

<script>
	export default {
		data() {
			return {
				aCheckCodeInput: ['','','','','',''], 	// 存储输入验证码内容
                aCheckCodePasteResult: [], 				// 粘贴的验证码
			}	
		},
		computed: {
            // 验证码计算属性
            aCheckCodeInputComputed() {
                if(this.aCheckCodePasteResult.length === 6) {
                    return this.aCheckCodePasteResult;
                } else if (this.aCheckCodeInput && Array.isArray(this.aCheckCodeInput) && this.aCheckCodeInput.length === 6) {
                    return this.aCheckCodeInput;
                } else if (/^\d{6}$/.test(this.aCheckCodeInput.toString())) {
                    return this.aCheckCodeInput.toString().split("");
                } else {
                    return new Array(6);
                }
            },
		},
		methods: {
			// 输入验证码，更新验证码数据
            fnCheckCodeKeyup(e) {
                let index = e.target.dataset.index * 1;
                let el = e.target;
                // 解决输入e的问题
                el.value = el.value
                    .replace(/Digit|Numpad/i, "")
                    .slice(0, 1);
                if (/Digit|Numpad/i.test(e.code)) {
                    // 必须在这里赋值，否则输入框会是空值
                    this.aCheckCodeInput.splice(index, 1, e.code.replace(/Digit|Numpad/i, ""));
                    el.nextElementSibling && el.nextElementSibling.focus();
                    if (index === 5) {
                        if (this.aCheckCodeInput.join("").length === 6)  document.activeElement.blur();
                    }
                }
            },
            // 输入验证码，检测位置变化
            fnCheckCodeKeydown(e) {
                let index = e.target.dataset.index * 1;
                let el = e.target;
                if (e.key === "Backspace") {
                    if (this.aCheckCodeInput[index].length > 0) {
                        this.aCheckCodeInput.splice(index, 1, '');
                    } else {
                        if (el.previousElementSibling) {
                            el.previousElementSibling.focus();
                            this.aCheckCodeInput[index - 1] = '';
                        }
                    }
                } else if(e.key === 'Delete') {
                    if (this.aCheckCodeInput[index].length > 0) {
                        this.aCheckCodeInput.splice(index, 1, '');
                    } else {
                        if(el.nextElementSibling) {
                            el.nextElementSibling.focus();
                            this.aCheckCodeInput[++index] = '';
                        }
                    }
                } else if (e.key === "Home") {
                    el.parentElement.children[0] && el.parentElement.children[0].focus();
                } else if (e.key === "End") {
                    el.parentElement.children[this.aCheckCodeInput.length - 1] &&
                    el.parentElement.children[this.aCheckCodeInput.length - 1].focus();
                } else if (e.key === "ArrowLeft") {
                    if (el.previousElementSibling) el.previousElementSibling.focus();
                } else if (e.key === "ArrowRight") {
                    if (el.nextElementSibling) el.nextElementSibling.focus();
                }
            },
			// 输入验证码，解决一个输入框输入多个字符的问题
            fnCheckCodeInputEvent(e) {
                let index = e.target.dataset.index * 1;
                let el = e.target;
                el.value = el.value
                    .replace(/Digit|Numpad/i, "")
                    .slice(0, 1);
                this.aCheckCodeInput[index] = el.value;
            },
            // 验证码粘贴
            fnCheckCodeKeyPaste(e) {
                e.clipboardData.items[0].getAsString((str) => {
                    if (str.toString().length === 6) {
                        this.aCheckCodePasteResult = str.split("");
                        document.activeElement.blur();
                        this.aCheckCodeInput = this.aCheckCodeInputComputed;
                        this.aCheckCodePasteResult = [];
                    } else {
                        // 如果粘贴内容不合规，清除所有内容
                        this.aCheckCodeInput = ['','','','','',''];
                    }
                });
            },
		}
	}
</script>
<style>
.g-remove-check-code {
    width: 100%;
    padding: 4px 0 8px 0;
}

.g-remove-check-code .g-remove-check-code_title {
    font-size: 14px;
    color: #666;
}

.g-remove-check-code .g-remove-check-code_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 400px;
    padding: 28px 0 28px 0;
    margin: 0 auto;
}

.g-remove-check-code .g-remove-check-code_content input {
    width: 50px;
    height: 50px;
    font-size: 36px;
    text-align: center;
    border: none;
    outline: none;
    border: solid 1px rgba(187, 187, 187, 100);
    border-radius: 4px;
    -moz-appearance: textfield;
}

.g-remove-check-code .g-remove-check-code_content input.g-code-input_color {
    border-color: #5290FF;
}

.g-remove-check-code .g-remove-check-code_content input::-webkit-outer-spin-button,
.g-remove-check-code .g-remove-check-code_content input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.g-remove-check-code .g-remove-check-code_tip {
    font-size: 14px;
    color: #999;
    text-align: center;
}
</style>

---

增加功能

• 按回车键提交验证码

	computed: {
		// 检测验证码是否输入完整
		bCheckCodeInputComplete() {
			return this.aCheckCodeInput.some(item => item === '');
		}
	},
	// 若输入Enter 返回；取消最后一个输入框的判断
	fnCheckCodeKeyup(e) {
		if(e.key === 'Enter') return;
        let index = e.target.dataset.index * 1;
            let el = e.target;
            // 解决输入e的问题
            el.value = el.value
                .replace(/Digit|Numpad/i, "")
                .slice(0, 1);
            if (/Digit|Numpad/i.test(e.code)) {
                // 必须在这里赋值，否则输入框会是空值
                this.aCheckCodeInput.splice(index, 1, e.code.replace(/Digit|Numpad/i, ""));
                el.nextElementSibling && el.nextElementSibling.focus();
         }
	},
	// 增加回车键判断
	fnCheckCodeKeydown(e) {
		let index = e.target.dataset.index * 1;
          let el = e.target;
          // 按 Enter 回车键，提交表单
          if(e.key === 'Enter') {
              if(this.bCheckCodeInputComplete) {
                  this.$message.warning('请输入六位数验证码~');
                  return;
              }
              // 执行请求接口方法
              return;
         }
         ...
	}

参考链接

https://zhuanlan.zhihu.com/p/152145625

---