vue 及 js 微信中 页面输入框被键盘顶上去之后,点击域错误 弹出框fixed absolute 定位的输入框 键盘弹出导致点击域失效 解决办法

造成这种问题的原因是body没有复位,所以把body 复位就可以了。

解决思路:1、input获取焦点的时候记住当前滚动的位置,2、input失去焦点的时候滚动到之前的位置。(亲测有效)。

附vue 代码,其他框架可以依据该思路修改。

PageScroll:0,// 位置  这个在data 里面定义变量
inputLoseBlur() {
 setTimeout(() => {
  window.scrollTo(0, this.PageScroll);
 }, 100);
},
inputLoseFocus() {
 this.PageScroll = this.GetPageScroll()
},
GetPageScroll(){
 var y;
 if (window.pageYOffset) {    // all except IE
  y = window.pageYOffset;
 } else if (document.documentElement && document.documentElement.scrollTop) {    // IE 6 Strict
  y = document.documentElement.scrollTop;
 } else if (document.body) {    // all other IE
  y = document.body.scrollTop;
 }
 return y
},

一共三个方法,第一个是失去焦点的时候滚动到之前位置,第二个是获取焦点的时候将当前位置的数据赋值给变量,第三个是获取当前位置。

<mt-field label="" placeholder="请输入手机号码" @focus.native.capture="inputLoseFocus" @blur.native.capture="inputLoseBlur" type="tel" v-model="loginMsg.mobile"></mt-field>

上面是使用方式。

猜你喜欢

转载自blog.csdn.net/lizhen_software/article/details/99414812