zoukankan      html  css  js  c++  java
  • 移动端H5 input输入完成后页面底部留白问题

    背景: H5页面在微信上展示,不管是在弹窗上的或者页面在偏底部位置的input输入完成之后点击键盘的完成,页面底部留出一片空白的问题

    出现原因分析
      当键盘抬起时,window.scrollY会从0变到键盘的高度,所以解决办法就是当input失去焦点的时候,将window.scrollY重新设置为点击之前的页面的高度(一般window.scrollTo(0,1000000)是可以解决大多数情况)

    解决方案1:
      核心代码:

      let currentY = 0;

      focus(){

        currentY = $(document).scrollTop || document.body.scrollTop

        // 下面写你的业务代码

      }

      onBlur(){

        window.scrollTo(0,currentY) 

        // 下面写你的业务代码

      }

    解决方案2:

      核心代码:

        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);
        }

     解决键盘弹出后挡表单的问题

    方法1:

    $inputclears指input元素,$btnbox指包裹input的div

    $inputclears.on('focus', function(){
      $btnbox.css('position', 'static')
    }).on('blur', function(e){
      $btnbox.css('position', 'fixed')
    })

    方法2:
    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);
      }
    });

    兼容部分ios手机可能好似微信版本的问题

    function fixScrollTop() {
    setTimeout(() => {
    // document.body.scrollTop = document.body.scrollHeight
    document.body.scrollIntoView(false)
    }, 100)
    }
    window.addEventListener('focusout', fixScrollTop)


    --------------------------------------
    本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    有n个人围成一圈,顺序排号。从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位。
    C编程实现2的1000次方(使程序中的n=1000即可)
    有n个整数,使其前面各数顺序向后移m个位置,最后m个数变成最前面m个数。
    有一个字符串,内有若干字符,输入一个字符,要求程序将字符串中该字符删去。
    使用静态变量的方法求n!
    数组排序:冒泡法和选择法
    使用函数的递归调用来解决Hanoi(汉诺)塔问题。
    VC5509的通用GEL代码
    字、字节和位的关系
    安装JDK后环境变量的配置
  • 原文地址:https://www.cnblogs.com/xuLessReigns/p/11227137.html
Copyright © 2011-2022 走看看