ios有安全机制,自动聚焦不生效
开发移动端的同学都会遇到ios的各种兼容性问题,遇到哪个咱们就说怎么解决哪个吧,ios自动聚焦就很常见,我最近做企微三方应用开发遇到了,那就记录一下吧
网上百度一大堆,五花八门的,业务场景也不一样,没几个好使的
// 直接这样是不好使的
this.$refs.input.focus()
// 直接这样是不好使的
setTimeout(() => {
this.$refs.input.focus()
}, 300)
// 直接这样是不好使的
this.$nextTick(() => {
this.$refs.input.focus()
})
说一下我的方案: (如果有更好的方案可以来一起沟通)
ios有安全机制,,需要让用户主动触发事件才能调起
说白了就是你得有个事件来触发它
// 移动端的事件触发顺序 touchstart -> touchmove -> touchend -> click
// 在生命周期函数里触发
mounted () {
document.addEventListener('touchstart', function (e) {
// 获取元素可用其他的document.getElementById('id')等等,这里我用的querySelector获取vantUI的van-field
document.querySelector('.input-wrap .input .van-field__control').focus()
})
}
// 若是在点击事件里触发的,这里直接获取元素调用focus()
onFocus () {
this.$nextTick(() => {
// 必须在DOM渲染完成后再去获取元素,否则可能会报错null
document.querySelector('.input-wrap .input .van-field__control').focus()
})
}