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)
}
},