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');
}
});
}
});
fullpage插件在移动端弹出键盘页面特殊处理的更多相关文章
- 【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼
前言 在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题 我这里做一次记录,以免以后忘了,同时希望 ...
- 移动端点击输入框,弹出键盘,底部被顶起问题(vue)
这个问题相信做移动端开发的童鞋会有深刻体会,以前用jq开发时就很头疼这个问题,每次底部footer部分需要用position:fixed,如果页面内容不是很长,没有超出屏幕范围,那就还好,没有问题:一 ...
- (Vue)移动端点击输入框,弹出键盘,底部被顶起问题
(Vue)移动端点击输入框,弹出键盘,底部被顶起问题:https://www.jianshu.com/p/210fbc846544 问题描述:Vue开发中,当我们相对于父视图的底部布局子控件时,需要用 ...
- mui搜索框在ios平台上点击多次才弹出键盘的解决方法
今天使用Hbuilder调试手机端时,发现搜索框在安卓系统下,点击一次就可以弹出键盘 但是在iso下非常的不规律,要点击多次 代码实现如下: <div class="mui-input ...
- [调整] Firemonkey TEdit 避免按下立即弹出键盘的问题
目前 Firemonkey 有一个问题,就是在 Edit 按下会立即弹出键盘,在红鱼儿的博客也提交了 QC: http://blog.sina.com.cn/s/blog_44fa172f0102vy ...
- IOS开发之自定义系统弹出键盘上方的view(转载)
这篇文章解决的一个开发中的实际问题就是:当弹出键盘时,自定义键盘上方的view.目前就我的经验来看,有两种解决方法.一个就是利用UITextField或者UITextView的inputAccesso ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- 关于UITextfield弹出键盘解决方案
解决的问题:当你点击一个UITextfield时,不想让其弹出键盘,如果你觉得不就是取消其第一响应者嘛,resignRespond一下不就行了嘛,确实,如果你只是在其编辑完成后让其键盘消失,那这个就够 ...
- UI弹出键盘和收回键盘
点击textfield,会自动弹出键盘 要让键盘收回来,先设置个代理:[field setTextFieldDelegate:self]; 可设置成自己,也可设置成其他对象,只要在对应的类中,遵循U ...
随机推荐
- 让jQuery的contains方法不区分大小写
// NEW selector jQuery.expr[':'].Contains = function(a, i, m) { return jQuery(a).text().toUpperCase( ...
- easyui---tree异步加载
1.ul li的多级列表的html代码tree 2.利用jquery <ul id="tt"></ul> $('#tt').tree({ url:'tree ...
- 依赖: nginx-common (= 1.14.0-0ubuntu1) 但是它将不会被安装
.apt --fix-broken install .sudo apt-get remove nginx nginx-common # 卸载删除除了配置文件以外的所有文件. .sudo apt-get ...
- [No0000161]IDEA初步接触
安装 参考https://blog.csdn.net/qq_35246620/article/details/61191375 安装过程全程默认(路径和快捷方式自定义,不需要下载jre): 启动后全程 ...
- git add详解
git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件. git add -u :他仅监控 ...
- OCR技术(光学字符识别)
什么是OCR? OCR英文全称是optical character recognition,中文叫光学字符识别.它是利用光学技术和计算机技术把印在或者写在纸上的 文字读取出来,并转换成一种计算机能够接 ...
- PHP之字符串类型
PHP之存取和修改字符串中的字符 PHP中的字符串,在存储的时候是按照字节存储的.利用一个字节数组存储字符串. PHP一个字符串string就是由一系列的字符组成,其中每个字符等同于一个字节. str ...
- c#构造函数对string类型赋初值
public class Stu { public Stu() { //当成员属性非常多难以一一赋值时,采用本方法.当然写代码逐一成员直接赋值效率更高. AssignEmptyStringMember ...
- ASMCMD报错解决:sh: /u01/app/11.2.4/grid/bin/clsecho: No such file or directory
sh: /u01/app/11.2.4/grid/bin/clsecho: No such file or directory 在登录asmcmd时报此错误,尝试解决,刷新oracle_sid也不行 ...
- mysql之索引简介
索引分类 mysql在存储数据时,是按着主键的顺序存储的.主键索引是物理索引,其他索引都是逻辑索引. 普通索引 普通索引是最基本的索引,没有任何限制的索引,普通索引列的数据可以重复.其唯一的任务就是加 ...