ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

（一）前端h5混合开发手机端ios  当有input输入时，手机下方弹出键盘使页面上移，当输入完成，键盘消失后页面显示回到原位，但实际不能点击（可点击上方区域，有反应），也就是说实际是没有回弹。

解决办法：

给input加blur事件，代码如下：

$('input').on('blur', function () {
          setTimeout(function(){
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
          }, 100);
});

（二）ios键盘唤起，键盘收起以后页面不归位 （vue中）

问题详情描述：

 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑

出现原因分析：

固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件

解决办法：

<div class="list">
  <div class="title"><span>啦啦啦</span></div>
   <div class="content">
     <input class="contentInput" 
            placeholder="你叫啥"
            v-model="peopleList.name"
           @focus="changefocus()"
           @blur.prevent="changeBlur()"/>    </div>
 </div>

 

changeBlur(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
      }
    }

拓展知识： position: fixed的元素在ios里，收起键盘的时候会被顶上去，特别是第三方键盘

（三）一般出现在IOS设备中的微信内部浏览器，出现的条件为：

• 页面高度过小
• 聚焦时，页面需要往上移动的时候

所以一般input在页面上方或者顶部都不会出现无法回弹🤣

解决办法为，在聚焦时，获取当前滚动条高度，然后失焦时，赋值之前获取的高度：

<template>
  <input type="text" @focus="focus" @blur="blur">
</template>

<script>
  export default {
    data() {
      return {
        scrollTop: 0
      }
    },
    
    methods: {
      focus() {
        this.scrollTop = document.scrollingElement.scrollTop;
      },
      
      blur() {
        document.scrollingElement.scrollTo(0, this.scrollTop);
      }
    }
  }
</script>

转载自掘金，链接：https://juejin.im/post/5d6e1899e51d453b1e478b29

就OK啦！