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

最新推荐文章于 2024-03-07 15:02:34 发布

原创最新推荐文章于 2024-03-07 15:02:34 发布 · 置顶 · 662 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 3 个专栏收录

34 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

元素滚动

2 篇文章

订阅专栏

本文介绍了一种解决输入框聚焦时页面滚动位置丢失的问题，通过记录并恢复滚动位置，确保用户体验。提供了Vue代码示例，适用于其他框架的实现思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

造成这种问题的原因是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>

上面是使用方式。