zoukankan      html  css  js  c++  java
  • fullpage插件在移动端弹出键盘页面特殊处理

    fullpage插件大家都很熟悉 jquery一款全屏上下滑动的插件。

    最近做公司一个活动移动端使用fullpage插件填写input的时候遇见一个问题,手机自带的键盘弹出的时候会把页面顶出去,页面错版,当时也是熬夜解决这个问题,首先想到的是键盘收起时重新给页面赋值高度,处理失败,fullpage插件会强迫重新复制给页面高度,

    等等一些方法赋值都不行,最后跟同事一起想办法解决掉了 ,so~话不多说分享给大家我认为正确的解决办法,希望遇到此问题的前端朋友能更快处理。

    $(function(){
    $('#scrollpage').fullpage({
    verticalCentered: false,
    });

    //安卓手机输入框弹出键盘特殊处理

    //ios手机是不会出现这样的问题,所以要区分出来
    var isModel = navigator.userAgent;
    var isAndroid = isModel.indexOf('Android') > -1 || isModel.indexOf('Adr') > -1; //android终端 
    if(isAndroid==true){ 
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; $(window).on('resize', function () {
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (clientHeight > nowClientHeight) {
    //键盘弹出的事件处理

    //强制给页面向上订出一个键盘的高度
    $('.fp-section').css('top', '-28%');
    }
    else {
    //键盘收起的事件处理
    $('.fp-section').css('top', '0');
    }
    });
    }

    });

  • 相关阅读:
    Spring配置自动加载执行多次的解决方法
    获取Excel文件内容,0307通用
    将Json转实体
    将实体转换为map
    Json数据转Map
    获取随机字符串
    将长内容分割,用双主键进行存储
    解决win10开机出现C:WIndowssystem32configsystemprofileDesktop不可用 问题
    2016.2.22
    云中行走
  • 原文地址:https://www.cnblogs.com/cxcoder/p/7859393.html
Copyright © 2011-2022 走看看