H5移动端 ios端 input输入框失去焦点，页面视觉回弹，但是底部留白一块

2019-08-14 2,953 阅读1分钟

在移动端，当点击输入框时，弹出软键盘，页面被顶上去一截，当输入完毕失去焦点，软键盘关闭时ios上页面高度没恢复，安卓手机会自动恢复页面高度。

解决方法：在输入框失去焦点后（关闭键盘）让页面滚一下

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中使用

<template>
  <div class="content">
    <input type="text"
       placeholder="请输入用户名" 
       @blur="blur" 
       @focus="focus" 
    />
  </div>
</template>

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