fullpage页面要是有输入框的话  点击输入框 键盘弹出的时候会把输入框也顶起来 页面就会向上移 但是键盘收回的时候页面还是上移的状态

对于这个问题只在android手机上出现  为了解决这个问题 我想到一个方法

fullpagejs 会自动在页面生成一个类名为 fp-section 的外层标签 只需在键盘弹出的时候改变这个div的位置 向上移一定百分比 键盘收回的时候返回原来位置就可以

下面是代码

//判断是否是android
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
//android处理输入框问题
if (isAndroid) {
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. fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)

    FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...

  2. AppBox v6.0中实现子页面和父页面的复杂交互

    前言 1. AppBox是捐赠开源(获取源代码至少需要捐赠作者 1 元钱),基于的 FineUI(开源版)则是完整开源,网址:http://fineui.codeplex.com/ 2. 你可以通过捐 ...

  3. 移动端-解决ios连续点击页面上移问题

    引入js即可 //解决ios双击页面上移问题//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了(function(){ var ag ...

  4. 解决ios双击页面上移问题

    做webapp时,ios有个默认双击事件,会缩放页面,并将当前点击的位置居中到屏幕,本来也没什么,但是当页面中有fixed定位的元素时,这时候你就会神奇的发现,fixed元素所见不所得了! 还有就是页 ...

  5. 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法

    问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...

  6. fullpage中高度错误的解决方法

    今天我再用fullpage写全屏页面的时候,发现在ie中,一整屏的页面总是不能铺满,高度总是少一截儿,各种搜索,找到了个合适的方法,这里记录下,也希望给之后遇到这个问题的人提供一种方式,当然不一定能解 ...

  7. Chrome中输入框默认样式移除

    Chrome中输入框默认样式移除 在chrome浏览器中会默认给页面上的输入框如input.textarea等渲染浏览器自带的边框效果 IE8中效果如下: Chrome中效果如下:   这在我们未给输 ...

  8. React-Native 之 GD (二十)removeClippedSubviews / modal放置的顺序 / Android 加载git图\动图 / 去除 Android 中输入框的下划线 / navigationBar

    1.removeClippedSubviews 用于提升大列表的滚动性能.需要给行容器添加样式overflow:’hidden’.(Android已默认添加此样式)此属性默认开启 这个属性是因为在早期 ...

  9. Html中设置访问页面不在后进行其他页面跳转

    Html中设置访问页面不在后进行其他页面跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

随机推荐

  1. acm 2015北京网络赛 F Couple Trees 主席树+树链剖分

    提交 题意:给了两棵树,他们的跟都是1,然后询问,u,v 表 示在第一棵树上在u点往根节点走 , 第二棵树在v点往根节点走,然后求他们能到达的最早的那个共同的点 解: 我们将第一棵树进行书链剖,然后第 ...

  2. 使用SVN提交代码,快速简单的换地址方法

    1.找到你项目所在的文档,然后删除.svn文件,如下图: 2.然后在使用小乌龟的图标,进行项目的导入,界面如下: 3.然后输入SVN库的地址,点击ok界面如下: 4.同步到eclipse的方法是,复制 ...

  3. Linux下系统时间函数、DST等相关问题总结(转)

    Linux下系统时间函数.DST等相关问题总结 下面这个结构体存储了跟时区相关的位移量(offset)以及是否存在DST等信息,根据所在的时区信息,很容易找到系统时间与UTC时间之间的时区偏移,另外根 ...

  4. BIOS备忘录之IIC(touchpad)设备

    简述BIOS中对IIC device的支持,以touchpad为例. 信息收集 收集平台的硬件信息: 1. IIC controller number(PCH一般包含多个controller,我们使用 ...

  5. Linux 系统查看对应公网映射地址

    最近在解决网络问题时,需要查看本机的出口公网IP信息,所以在网络上搜索和请求运维达人,获得如下两个方法: curl ifconfig.me 在linux系统中输入上述的命令,可以查看到本机连接的公网信 ...

  6. Linux rsync同步

    rsync介绍 rsync命令是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.rsync使用所谓的“rsync算法”来使本地和远程两个主机之间的文件达到同步,这个算法只传送两个文 ...

  7. 采用xtrabackup部署主从同步

    1.停掉从库192.168.1.23[root@dev-env23 tmp]# service mysqld stopStopping mysqld: [ OK ] 2.主库全备份cd /opt/xt ...

  8. JS设计模式(7)组合模式

    什么是组合模式? 定义:1.将对象组合成树形结构以表示"部分-整体"的层次结构.2.组合模式使得用户对单个对象和组合对象的使用具有一致性.3.无须关心对象有多少层,调用时只需在根部 ...

  9. 用mint-ui picker组件 实现省市区三级联动

    公司上一期项目中新增了省市区滑动三级联动效果,用的是mint-ui的picker组件和popup组件,效果如下:点击确定换地区,点击取消不变 省市区数据是后台给的(根据上一级的id,获取下一级数据列表 ...

  10. Linux Sphinx 安装与使用

    一.什么是 Sphinx? Sphinx 是一个基于SQL的全文检索引擎,可以结合 MySQL,PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序 更容易实现专业化 ...