univue系列

uniapp input自动获取焦点后又失效解决

2023-09-27  本文已影响0人  litielongxx

移动端输入框输入完,自动聚焦属于常见功能。
用完uview后自动失效了,加个timeout可以处理大部分,具体原因可能是渲染完成的时机影响了,nexttrick此刻无效。
native修饰符,多用于ui库。例如input上键盘事件是原生,而非u-inpu提供。此时用native修饰绑定到渲染后的input。

<u -input @keydown.enter.native="nextFocus(i)"/>

...
nextFocus(i, isSecond) {
      // 聚焦只box下所有input数量有关
      let inputs = document.querySelectorAll('#box input')
      if (i < inputs.length) {
        if (this.programId == 1) {
          this.focusIndex = isSecond ? 2 * (i + 1) : 2 * i + 1
        } else {
          this.focusIndex++
        }
      } else {
        this.focusIndex = null
      }
      // document.querySelector('#box input').focus()
      // 页面聚焦无延迟则获取后会消失
      if (inputs[this.focusIndex]) {
        console.log(1, this.focusIndex)
        let timer = setTimeout(() => {
          clearTimeout(timer)
          inputs[this.focusIndex].focus()
        }, 300)
      }
    },
上一篇下一篇

猜你喜欢

热点阅读