ios端输入键盘收起后页面不回弹或底部留白

/**
 * 文件来源：https://www.codeprj.com/blog/9c3f8e1.html
 */

const { react } = require("babel-types");


//  1. 非框架搭建的页面
const windowHeight = window.innerHeight
input.addEventListener('blur', function () {
    let windowFocusHeight = window.innerHeight
    if (windowHeight == windowFocusHeight) {
        return
    }
    console.log(windowHeight + '--' + windowFocusHeight);
    console.log('修复');
    let currentPosition;
    let speed = 1; //页面滚动距离
    currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
    currentPosition -= speed;
    window.scrollTo(0, currentPosition); //页面向上滚动
    currentPosition += speed; //speed变量
    window.scrollTo(0, currentPosition); //页面向下滚动
})


// 2. vue指令代码
const windowHeight = window.innerHeight
Vue.directive('fixedInput', function (el, binding) {
  el.addEventListener('blur', function () {
    let windowFocusHeight = window.innerHeight
    if (windowHeight == windowFocusHeight) {
      return
    }
    console.log(windowHeight + '--' + windowFocusHeight);
    console.log('修复');
    let currentPosition;
    let speed = 1; //页面滚动距离
    currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
    currentPosition -= speed;
    window.scrollTo(0, currentPosition); //页面向上滚动
    currentPosition += speed; //speed变量
    window.scrollTo(0, currentPosition); //页面向下滚动
  })
})


// 3. Vue 在全局添加
// 先写一个mixin,fixedInput.js
/**
    1 export default {
 2   data() {
 3     return {
 4       windowHeight: 0
 5     }
 6   },
 7   mounted() {
 8     this.windowHeight = window.innerHeight
 9   },
10   methods: {
11     temporaryRepair() {
12       let that = this
13       let windowFocusHeight = window.innerHeight
14       if (that.windowHeight == windowFocusHeight) {
15         return
16       }
17       console.log(that.windowHeight + '--' + windowFocusHeight);
18       console.log('修复');
19       let currentPosition;
20       let speed = 1; //页面滚动距离
21       currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
22       currentPosition -= speed;
23       window.scrollTo(0, currentPosition); //页面向上滚动
24       currentPosition += speed; //speed变量
25       window.scrollTo(0, currentPosition); //页面向下滚动
26     },
27   }
28 }

在 App.vue 中引用

 1 <template>
 2   <div id="app">
 3     <router-view />
 4   </div>
 5 </template>
 6 <script>
 7   import fixedInput from '@/mixins/fixedInput'
 8   export default {
 9     name: 'app',
10     mixins: [fixedInput],
11     updated() {
12       // 解决ios输入框弹出的页面样式问题
13       document.querySelectorAll("input").forEach(item => {
14         item.onblur = this.temporaryRepair;
15       });
16       document.querySelectorAll("select").forEach(item => {
17         item.onchange = this.temporaryRepair;
18       });
19       document.querySelectorAll("textarea").forEach(item => {
20         item.onblur = this.temporaryRepair;
21       });
22     },
23   }
24 </script>
 */




// 4. React中使用
/*判断客户端*/
export const judgeClient = () => {
  let u = navigator.userAgent;
  console.log('u',u)
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;   //判断是否是 android终端
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);     //判断是否是 iOS终端
  if(isAndroid){
      return 'Android';
  }else if(isIOS){
      return 'IOS';
  }else{
      return 'PC';
  }
}

/*
render(){
  return (
    <Input allowClear maxLength={20} placeholder="请输入手机号" onBlur={this.handleBlur}/>
  )
}
*/

handleBlur = () => {
  if (judgeClient() === 'IOS') {
      const windowFocusHeight = window.innerHeight
      if (window.innerHeight === windowFocusHeight) {
          return
      }
      
      let currentPosition
      const speed = 1 // 页面滚动距离
      currentPosition = document.documentElement.scrollTop || document.body.scrollTop
      currentPosition -= speed
      window.scrollTo(0, currentPosition) // 页面向上滚动
      currentPosition += speed // speed变量
      window.scrollTo(0, currentPosition) // 页面向下滚动
  }
}