微信端浏览器弹出框焦点错位问题解决
微信端浏览器弹出框焦点错位问题解决
注：主要解决iphoneX、XS、XSM 上焦点错位问题（单输入失去焦点，多输入切换焦点）
组件
<van-dialog
v-model="show"
show-cancel-button
style="background: #fff;"
>
<div style="font-size: 20px;text-align: center;margin: 10px 0;">
解决bug
</div>
<van-field
v-model="username"
label="姓名"
placeholder="请输入姓名"
@focus="myfocus"
@blur.prevent="myblur"
/>
<van-field
v-model="phone"
type="phone"
label="手机"
placeholder="请输入手机号"
@focus="myfocus"
@blur.prevent="myblur"
/>
</van-dialog>
JS
{
data(){
return {
}
},
method:{
myfocus() {
this.isfocus = true;
console.log("focus" + String(this.isfocus));
},
myblur() {
let _this = this;
_this.isfocus = false;
let t = setTimeout(function() {
if (_this.isfocus) {
console.log("切换到下一个输入框" + _this.isfocus);
clearTimeout(t);
return false;
} else {
console.log("直接失去焦点，隐藏键盘" + _this.isfocus);
window.scrollTo(0, 0);
}
clearTimeout(t);
}, 200);
}
}
}
