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

·  阅读 1915

在移动端,当点击输入框时,弹出软键盘,页面被顶上去一截,当输入完毕失去焦点,软键盘关闭时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>
复制代码
分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改