fix: 验证码重复输入/限制输入数字
This commit is contained in:
@@ -4,9 +4,11 @@
|
||||
<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.delete="e=>{onKeydown(e.target.value, index)}"
|
||||
@keydown="e => {onKeydown(e, index)}"
|
||||
@keypress="e => {onKeypress(e)}"
|
||||
@focus="onFocus"
|
||||
:disabled="loading"
|
||||
>
|
||||
@@ -55,6 +57,7 @@ export default defineComponent({
|
||||
},
|
||||
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
|
||||
@@ -80,14 +83,29 @@ export default defineComponent({
|
||||
index = (index + this.ctSize) % this.ctSize;
|
||||
this.$refs.input[index].focus();
|
||||
},
|
||||
onKeydown(val, index) {
|
||||
if (val === '') {
|
||||
// 删除上一个input里的值,并对其focus。
|
||||
if (index > 0) {
|
||||
this.getCtData[index - 1] = '';
|
||||
this.$refs.input[index - 1].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() {
|
||||
|
||||
Reference in New Issue
Block a user