nvue input使用blur()方法会意外导致@focus触发
<template>
<view class="content">
<text>输入到最后一个后自动blur(快速输入会导致focus在blur后触发)</text>
<view v-for="key in 4" :key="key" style="background-color: #007AFF;margin-top: 20rpx;">
<input :ref="'input'+key" :value="s_code[key - 1]" @focus="inputFocus" @blur="inputBlur" @input="input(key)" type="number" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
s_code: ['', '', '', ''],
code_key: 1,
now_code_key: 0
}
},
onLoad() {
},
methods: {
inputBlur() {
this.now_code_key = 0
},
inputFocus() {
console.log('focus')
this.now_code_key = this.code_key
},
getNext(key) {
return key + 1 > 4 ? 4 : key + 1
},
input(key) {
if(key == 4) {
this.now_code_key = 0
this.$refs['input4'][0].blur()
console.log(this.now_code_key, 'blur')
}else {
this.code_key = this.getNext(key)
this.now_code_key = this.code_key
this.$nextTick(function() {
this.$refs['input' + this.code_key][0].focus()
console.log('auto focus')
})
}
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
2***@qq.com (作者)
花了时间,把业务代码修改,提出来了
2021-10-04 18:51