美文网首页univue系列
uniapp input自动获取焦点后又失效解决

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

作者: litielongxx | 来源:发表于2023-09-27 11:14 被阅读0次

    移动端输入框输入完,自动聚焦属于常见功能。
    用完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)
          }
        },
    

    相关文章

      网友评论

        本文标题:uniapp input自动获取焦点后又失效解决

        本文链接:https://www.haomeiwen.com/subject/exjkbdtx.html