2***@qq.com
2***@qq.com
  • 发布:2021-10-04 11:50
  • 更新:2021-10-04 16:09
  • 阅读:488

nvue input使用blur()方法会导致@focus触发

分类:nvue

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>  
2021-10-04 11:50 负责人:无 分享
已邀请:
DCloud_uniCloud_JSON
  • 2***@qq.com (作者)

    花了时间,把业务代码修改,提出来了

    2021-10-04 18:51

该问题目前已经被锁定, 无法添加新回复