移动端H5 input输入完成后页面底部留白问题

栏目: JavaScript · 发布时间: 5年前

内容简介:最近在用

说明

最近在用 vue 写几个H5页面在微信上展示,遇到一个在弹窗上 input 输入完成之后点击键盘的完成,页面底部留出一片空白的问题

移动端H5 input输入完成后页面底部留白问题

出现原因分析

  • 当键盘抬起时, window.scrollY 会从0变到键盘的高度,所以解决办法就是当 input 失去焦点的时候,将 window.scrollY 重新设置为0

解决

  • 给所有的 input `textarea 组件设置获取焦点和设置焦点事件,失去焦点的时候将 `window.scrollY`设置为0
  • 因为的是 vue 所以结合 vue 来写代码
<template>
  <input class="m-input" :value="value" @input="$emit('input', $event.target.value)" @focus="inputFocus()" @focusout="inputFocusOut">
</template>

<script>
  export default {
    name: "MInput",
    props:['value'],
    data(){
      return{
        timer:null
      }
    },
    methods:{
      inputFocus(){
        if(this.timer){
          clearTimeout(this.timer)
        }
      },
      inputFocusOut(){
        this.timer = setTimeout(() => {
          window.scrollTo(0,0)
        },10)
      }
    },
    destroyed(){
      if(this.timer){
        clearTimeout(this.timer)
      }
    }
  }
</script>
  • 获取焦点事件,判断定时器是否存在如果存在的话清除掉(上一个input设置的定时器)
  • 失去焦点事件,将 window.scrollY 设置为 0 ,并且给一个 10 的定时器,减少页面失去焦点的突兀感(为了顺滑一点点)
  • destroyed vue 组件中如果使用了定时器,一定要记得在组件销毁的生命周期里将清时期清除掉,防止全局定时器过多,容易爆栈

补充:解决方案2

  • 在input上分别增加 focusblur 的方法,基本可以解决键盘回落后留白问题;
handleFocus(event) {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'start',
            behavior: 'smooth'
        });
    }, 300);
}
handleblur() {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'end',
            behavior: 'smooth'
        });
    }, 300);
     window.scrollTo(0, 0);
}

补充:解决方案3

//解决键盘弹出后挡表单的问题
    window.addEventListener('resize', function() {
      if(
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        window.setTimeout(function() {
          if('scrollIntoView' in document.activeElement) {
            document.activeElement.scrollIntoView();
          } else {
            document.activeElement.scrollIntoViewIfNeeded();
          }
        }, 0);
      }
    });

补充:页面来回弹跳

  • 问题:失焦时的scrollTop=0造成的页面弹跳。本来iOS是做了这方面的优化,在软键盘弹出和收起时页面会smooth的平滑,由于我加了scrollIntoView破坏了原生的优化导致弹跳了
  • 解决:
handleFocus(event) {
    clearTimeout(this.timer);
}
handleblur() {
    this.timer = setTimeout(() => {
        document.body.scrollTop = 0;
        window.pageXOffset = 0;
        document.documentElement.scrollTop = 0;
    }, 100);
}

最后


以上所述就是小编给大家介绍的《移动端H5 input输入完成后页面底部留白问题》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

零基础学算法

零基础学算法

戴艳 / 机械工业出版社 / 2012-3-1 / 69.00元

零基础学算法(第2版),ISBN:9787111372493,作者:戴艳 等编著一起来看看 《零基础学算法》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具