input神奇问题之 设置 maxlength 依旧会触发 bindinput 事件处理办法
发布于 3 年前 作者 lei34 2560 次浏览 来自 分享

做了一个验证码的功能,在真机 测试下 发现输入框输入值 超过 maxlength 的时候 依旧会触发bindinput 事件。但是 e.detail.value 没有变化, 这就会导致 一直触发 bindinput中的逻辑。

解决办法:

根据输入框的长度,判断是否可以触发 到达指定长度后的逻辑,但是这样会出现问题,点击 删除 也不会触发

利用 keyCode 如果是8 代表删除 键盘值,伪代码如下:

 handleInput(e) {
      const { keyCode } = e.detail
      if(this.data.codes.length === this.properties.len && keyCode!=8)return
      const {
        value
      } = e.detail
      this.setData({
        codes: value.split('')
      }, () => {
        if (value.length === this.properties.len) {
          this.setData({focus:false},()=>{
            this.triggerEvent('onRightInput', value)
          })
         
        }

      })

    },
回到顶部