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

});

fullpage插件在移动端弹出键盘页面特殊处理的更多相关文章

  1. 【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼

    前言 在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题 我这里做一次记录,以免以后忘了,同时希望 ...

  2. 移动端点击输入框,弹出键盘,底部被顶起问题(vue)

    这个问题相信做移动端开发的童鞋会有深刻体会,以前用jq开发时就很头疼这个问题,每次底部footer部分需要用position:fixed,如果页面内容不是很长,没有超出屏幕范围,那就还好,没有问题:一 ...

  3. (Vue)移动端点击输入框,弹出键盘,底部被顶起问题

    (Vue)移动端点击输入框,弹出键盘,底部被顶起问题:https://www.jianshu.com/p/210fbc846544 问题描述:Vue开发中,当我们相对于父视图的底部布局子控件时,需要用 ...

  4. mui搜索框在ios平台上点击多次才弹出键盘的解决方法

    今天使用Hbuilder调试手机端时,发现搜索框在安卓系统下,点击一次就可以弹出键盘 但是在iso下非常的不规律,要点击多次 代码实现如下: <div class="mui-input ...

  5. [调整] Firemonkey TEdit 避免按下立即弹出键盘的问题

    目前 Firemonkey 有一个问题,就是在 Edit 按下会立即弹出键盘,在红鱼儿的博客也提交了 QC: http://blog.sina.com.cn/s/blog_44fa172f0102vy ...

  6. IOS开发之自定义系统弹出键盘上方的view(转载)

    这篇文章解决的一个开发中的实际问题就是:当弹出键盘时,自定义键盘上方的view.目前就我的经验来看,有两种解决方法.一个就是利用UITextField或者UITextView的inputAccesso ...

  7. 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  8. 关于UITextfield弹出键盘解决方案

    解决的问题:当你点击一个UITextfield时,不想让其弹出键盘,如果你觉得不就是取消其第一响应者嘛,resignRespond一下不就行了嘛,确实,如果你只是在其编辑完成后让其键盘消失,那这个就够 ...

  9. UI弹出键盘和收回键盘

    点击textfield,会自动弹出键盘 要让键盘收回来,先设置个代理:[field setTextFieldDelegate:self];  可设置成自己,也可设置成其他对象,只要在对应的类中,遵循U ...

随机推荐

  1. KMP 算法详解

    之前模模糊糊的理解了KMP,结果由于并不是完全弄清楚而导致自己在一道题目上疯狂的T,似乎是next函数写的有问题,于是痛心疾首的回来写一篇报告,警示自己 对KMP来说,匹配串的next数组是重中之重, ...

  2. AtCoder Beginner Contest 070|Elena|8.12|#471

    打了场beginner的AtCoder,也是我第一次打AtCoder,虽然AK了,但是由于手速慢+撒比,才#471… 比赛链接:https://beta.atcoder.jp/contests/abc ...

  3. 将音乐生成波浪图形,JavaScript Html5

    x 省略废话(N+)... Windows Media Palyer中的经典波浪形 自己也行动手做一个,最好是JavaScript实现的, 搜索到了资源部分关键词"HTML5 频谱" ...

  4. MySQL之多表查询一 介绍 二 多表连接查询 三 符合条件连接查询 四 子查询 五 综合练习

    MySQL之多表查询 阅读目录 一 介绍 二 多表连接查询 三 符合条件连接查询 四 子查询 五 综合练习 一 介绍 本节主题 多表连接查询 复合条件连接查询 子查询 首先说一下,我们写项目一般都会建 ...

  5. windows下批量生成文件夹

    在windows环境下如果想要批量生成文件夹: 1.创建一个记事本文件 2.首行大写MD 3.后面加上你想创建的文件夹的名字,每个名字之间有空格 4.退出记事本并保存 5.将记事本文件后缀改为bat文 ...

  6. set,env,export,set -x,set -e;

    set 用来显示本地变量 env 用来显示环境变量 export 用来显示和设置环境变量 set 显示当前shell的变量,包括当前用户的变量 env 显示当前用户的变量 export 显示当前导出成 ...

  7. Java 输入/输出——处理流(BufferedStream、PrintStream、转换流、推回输入流)

    关于使用处理流的优势,归纳起来就是两点:(1)对于开发人员来说,使用处理流进行输入/输出操作更简单:(2)使用处理流执行效率更高. 1.BufferedInputStream/BufferedOutp ...

  8. ORA-00054:resource busy and acquire with nowait specified解决方法

    1.用dba权限的用户查看数据库都有哪些锁 SELECT T2.USERNAME,T2.SID,T2.SERIAL#,T2.LOGON_TIME        FROM V$LOCKED_OBJECT ...

  9. SearchContextMissingException[No search context found for id [1545782]]

    这个原因是scroll的时间设置不够久,设久一些就可以了.

  10. scp & cat远程文件操作

    对拷文件夹 (包括文件夹本身) scp -r /home/wwwroot/www/charts/util root@192.168.1.65:/home/wwwroot/limesurvey_back ...