微信开发新坑iOS上虚拟键盘引起的触控错位

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Tyro_java/article/details/84899136

在微信公众号开发中遇到了的问题： 点击事件触控区域出错

网上的帖子：

• http://html51.com/info-59028-1/
• https://www.codercto.com/a/43883.html

解决方案参考：

目前有两种方式： 第一种是网上的解决方案，第二种是自己想到的解决方案，注：在react实现

方案1：

input 元素

<input ref="mobile" type="tel" placeholder="请填写您的手机号"
   onBlur={()=>{
     Utils.iOSKeyboardFixer();
   }}
 />
 

Utils 中的控制方式：

export default {
  ...,
  iOSKeyboardFixer() {
    if(!this.isIOS()) {
      return;
    }
    // 处理bug 方式1
    document.body.scrollTop = document.body.scrollTop;
  }
}
  

方案2：

input 元素

<input ref="mobile" type="tel" placeholder="请填写您的手机号"
   onBlur={(e)=>{
     Utils.iOSKeyboardFixer(e.target.getBoundingClientRect().top);
   }}
 />
 

Utils 中的控制方式：

export default {
  ...,
  iOSKeyboardFixer(top) {
    if(!this.isIOS()) {
      return;
    }
    // 处理bug 方式2
    window.scrollTo(0, 0); // 先滚动到顶部
    window.scrollTo(0, top); // 再滚动到原来的位置 
  }
}