场景
机型:iphone7 - iphonex
微信版本:最新版微信下
页面弹出层中有input框,blur后,滑动页面,其他按钮的点击事件错位。
解决办法
在input唤醒键盘输入后,在input上加入onBlur事件,input失去焦点后,让页面滚动到顶部(document.body.scrollTop = 0 )
<div class="mobile-phone" @click="$refs['input'].focus()">
<input class="input_phone" type="number" ref="input" placeholder="输入手机号" v-model="phoneNumber" @blur="onBlur">
</div>
private onBlur(event: any) {
if (/(Android)/i.test(navigator.userAgent)) {
return
}
if (document.body) {
document.body.scrollTop = 0
}
}
参考文章
;(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', (e) => { 'input', 'textarea'].includes(e.target.localName) && document.body.scrollIntoView(false) }, true)