h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题

Posted 2021-02-01 Black Bentel

项目中遇到了这个问题，说实话 ios 端问题挺多的，原因找起来比较简单，就是吊起键盘的时候把window的高度挤小了，然后，

关掉键盘页面高度没恢复，安卓手机会自动恢复页面高度。

原因找到了就想解决办法，刚开始想的是 iOS 它不恢复那我也没办法，这属于 iOS 的bug啊或者微信的 bug 啊，但领导不这么想，

页面显示出问题了当然得解决，就在google里翻，也是找到解决方法了，如下链接

 

微信6.7.4 ios12软键盘顶起页面后隐藏不回弹解决方案

解决方法很简单，让window滚动下就可以恢复window的高度了。

第一种方法，在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中

的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur）

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); //页面向下滚动
  })
})

　　

2. 监听window 的 resize 事件，当页面高度发生变化时滚动window，也就不用每个input都做处理了，但是有定时器，但凡有定时器的代码本人一般都不怎么用，

代码如下（按理也可以解决select 导致的底部留白）

const windowHeight = window.innerHeight
var windowScrollTimer = null
window.addEventListener(‘resize‘, function () {
  console.log(windowHeight);
  if (windowScrollTimer) {
    return
  }
  let windowFocusHeight = window.innerHeight
  if (windowHeight == windowFocusHeight) {
    return
  }
  windowScrollTimer = setInterval(() => {
    windowFocusHeight = window.innerHeight
    if (windowHeight == windowFocusHeight) {
      clearInterval(windowScrollTimer)
      windowScrollTimer = null
      return
    }
    console.log(windowHeight + ‘--‘ + windowFocusHeight);
    console.log(‘修复‘);
    fixInputBugs()
  }, 100)
})
function fixInputBugs () {
  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); //页面向下滚动
}