移动端-在 iPhoneX 微信中 H5 input 输入完成后

vue 项目,在 iPhoneX 的微信浏览器中点击输入框弹出键盘输入法,窗口高度会变小,关闭键盘后底部会出现留白的问题,需要滑动页面才能恢复正常 (解决问题思路就是在 blur 等事件之后让页面滚动下从而恢复 window 的高度)

### 核心代码,给 input 的 blur 事件下面的事件处理函数,下面是 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); //页面向下滚动
  })
}

相关链接

• 原文地址
• Vue-directive
• vue.js