验证码防抖
This commit is contained in:
李志鹏
@@ -1,151 +1,177 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="captcha">
|
||||
<input v-for="(c, index) in getCtData" :key="index"
|
||||
type="text"
|
||||
v-model="getCtData[index]" ref="input"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
@input="e => {onInput(e.target.value, index)}"
|
||||
@keydown="e => {onKeydown(e, index)}"
|
||||
@keypress="e => {onKeypress(e)}"
|
||||
@focus="onFocus"
|
||||
:disabled="loading"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app">
|
||||
<div class="captcha">
|
||||
<input
|
||||
v-for="(c, index) in getCtData"
|
||||
:key="index"
|
||||
type="text"
|
||||
v-model="getCtData[index]"
|
||||
ref="input"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
@input="(e) => onInput(e.target.value, index)"
|
||||
@keydown="(e) => onKeydown(e, index)"
|
||||
@keypress="(e) => onKeypress(e)"
|
||||
@focus="onFocus"
|
||||
@pause="onPause"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
props:['ct'],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getCtData(){
|
||||
return this.ct
|
||||
},
|
||||
ctSize() {
|
||||
return this.getCtData.length;
|
||||
},
|
||||
cIndex() {
|
||||
let i = this.getCtData.findIndex(item => item === '');
|
||||
i = (i + this.ctSize) % this.ctSize;
|
||||
return i;
|
||||
},
|
||||
lastCode() {
|
||||
return this.getCtData[this.ctSize - 1];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
cIndex() {
|
||||
this.resetCaret();
|
||||
},
|
||||
lastCode(newVal,oldVal) {
|
||||
if (newVal && newVal != oldVal) {
|
||||
this.$refs.input[this.ctSize - 1].blur();
|
||||
this.sendCaptcha();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetCaret();
|
||||
},
|
||||
methods: {
|
||||
onInput(val, index) {
|
||||
console.log('input',val,index)
|
||||
// val = val.replace(/[^0-9]/g, '');
|
||||
val = String(val).replace(/\D/g, '');
|
||||
this.getCtData[index] = val
|
||||
if (index == this.ctSize - 1) {
|
||||
this.getCtData[this.ctSize - 1] = val[0]; // 最后一个码，只允许输入一个字符。
|
||||
} else if(val.length > 1) {
|
||||
let i = index;
|
||||
for (i = index; i < this.ctSize && i - index < val.length; i++) {
|
||||
this.getCtData[i] = val[i];
|
||||
}
|
||||
this.resetCaret();
|
||||
}else if(!(val+'')){
|
||||
this.getCtData[index] = ''
|
||||
}
|
||||
},
|
||||
// 重置光标位置。
|
||||
resetCaret() {
|
||||
this.$refs.input[this.ctSize-1].focus();
|
||||
},
|
||||
onFocus() {
|
||||
// 监听 focus 事件，将光标重定位到“第一个空白符的位置”。
|
||||
let index = this.getCtData.findIndex(item => item === '');
|
||||
index = (index + this.ctSize) % this.ctSize;
|
||||
this.$refs.input[index].focus();
|
||||
},
|
||||
onKeypress(e) {
|
||||
// 只允许输入数字0-9
|
||||
const char = String.fromCharCode(e.which);
|
||||
if (!/[0-9]/.test(char)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
onKeydown(e, index) {
|
||||
// 处理删除键
|
||||
if (e.key === 'Backspace' || e.key === 'Delete') {
|
||||
const val = e.target.value;
|
||||
if (val === '') {
|
||||
// 删除上一个input里的值，并对其focus。
|
||||
if (index > 0) {
|
||||
this.getCtData[index - 1] = '';
|
||||
this.$refs.input[index - 1].focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
// 阻止其他非数字字符
|
||||
else if (e.key && !/[0-9]/.test(e.key) && !['Backspace', 'Delete', 'Tab', 'Enter', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
export default defineComponent({
|
||||
props: ["ct"],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
timeout: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getCtData() {
|
||||
return this.ct;
|
||||
},
|
||||
ctSize() {
|
||||
return this.getCtData.length;
|
||||
},
|
||||
cIndex() {
|
||||
let i = this.getCtData.findIndex((item) => item === "");
|
||||
i = (i + this.ctSize) % this.ctSize;
|
||||
return i;
|
||||
},
|
||||
lastCode() {
|
||||
return this.getCtData[this.ctSize - 1];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cIndex() {
|
||||
this.resetCaret();
|
||||
},
|
||||
lastCode(newVal, oldVal) {
|
||||
if (newVal && newVal != oldVal) {
|
||||
this.$refs.input[this.ctSize - 1].blur();
|
||||
this.sendCaptcha();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetCaret();
|
||||
},
|
||||
methods: {
|
||||
onInput(val, index) {
|
||||
console.log("input", val, index);
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
console.log("input=>", val, index);
|
||||
// val = val.replace(/[^0-9]/g, '');
|
||||
val = String(val).replace(/\D/g, "");
|
||||
this.getCtData[index] = val;
|
||||
if (index == this.ctSize - 1) {
|
||||
this.getCtData[this.ctSize - 1] = val[0]; // 最后一个码，只允许输入一个字符。
|
||||
} else if (val.length > 1) {
|
||||
let i = index;
|
||||
for (
|
||||
i = index;
|
||||
i < this.ctSize && i - index < val.length;
|
||||
i++
|
||||
) {
|
||||
this.getCtData[i] = val[i];
|
||||
}
|
||||
this.resetCaret();
|
||||
} else if (!(val + "")) {
|
||||
this.getCtData[index] = "";
|
||||
}
|
||||
}, 10);
|
||||
},
|
||||
onPause() {},
|
||||
// 重置光标位置。
|
||||
resetCaret() {
|
||||
this.$refs.input[this.ctSize - 1].focus();
|
||||
},
|
||||
onFocus() {
|
||||
// 监听 focus 事件，将光标重定位到“第一个空白符的位置”。
|
||||
let index = this.getCtData.findIndex((item) => item === "");
|
||||
index = (index + this.ctSize) % this.ctSize;
|
||||
this.$refs.input[index].focus();
|
||||
},
|
||||
onKeypress(e) {
|
||||
// 只允许输入数字0-9
|
||||
const char = String.fromCharCode(e.which);
|
||||
if (!/[0-9]/.test(char)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
onKeydown(e, index) {
|
||||
// 处理删除键
|
||||
if (e.key === "Backspace" || e.key === "Delete") {
|
||||
const val = e.target.value;
|
||||
if (val === "") {
|
||||
// 删除上一个input里的值，并对其focus。
|
||||
if (index > 0) {
|
||||
this.getCtData[index - 1] = "";
|
||||
this.$refs.input[index - 1].focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
// 阻止其他非数字字符
|
||||
else if (
|
||||
e.key &&
|
||||
!/[0-9]/.test(e.key) &&
|
||||
![
|
||||
"Backspace",
|
||||
"Delete",
|
||||
"Tab",
|
||||
"Enter",
|
||||
"ArrowLeft",
|
||||
"ArrowRight",
|
||||
"ArrowUp",
|
||||
"ArrowDown",
|
||||
].includes(e.key)
|
||||
) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
sendCaptcha() {
|
||||
let password = this.getCtData.map(item => item).join('');
|
||||
this.$emit('sendCaptcha',password)
|
||||
},
|
||||
sendCaptcha() {
|
||||
let password = this.getCtData.map((item) => item).join("");
|
||||
this.$emit("sendCaptcha", password);
|
||||
},
|
||||
|
||||
reset() {
|
||||
// 重置。一般是验证码错误时触发。
|
||||
this.getCtData = this.getCtData.map(item => '');
|
||||
this.resetCaret();
|
||||
}
|
||||
}
|
||||
})
|
||||
reset() {
|
||||
// 重置。一般是验证码错误时触发。
|
||||
this.getCtData = this.getCtData.map((item) => "");
|
||||
this.resetCaret();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.captcha {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
input {
|
||||
width: 8.7rem;
|
||||
height: 8.7rem;
|
||||
border: 0.1rem solid #B4BED7;
|
||||
border-radius: 2rem;
|
||||
text-align: center;
|
||||
font-size: 2.4rem;
|
||||
line-height: 8.7rem;
|
||||
outline: none;
|
||||
}
|
||||
input:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
input:disabled {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
.msg {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.captcha {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
input {
|
||||
width: 8.7rem;
|
||||
height: 8.7rem;
|
||||
border: 0.1rem solid #b4bed7;
|
||||
border-radius: 2rem;
|
||||
text-align: center;
|
||||
font-size: 2.4rem;
|
||||
line-height: 8.7rem;
|
||||
outline: none;
|
||||
}
|
||||
input:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
input:disabled {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
.msg {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user