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. CSS——对position定位和margin-top的理解

    一.常见定位方式 1.positon:absolute (脱离文档流) 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和abso ...

  2. 剑指offer(21)栈的压入、弹出序列

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序 ...

  3. Loj 6036 「雅礼集训 2017 Day4」编码 - 2-sat

    题目传送门 唯一的传送门 题目大意 给定$n$个串,每个串只包含 ' .问是否可能任意两个不同的串不满足一个是另一个的前缀. 2-sat的是显然的. 枚举每个通配符填0还是1,然后插入Trie树. 对 ...

  4. 论文笔记:Visual Semantic Navigation Using Scene Priors

    Visual Semantic Navigation Using Scene Priors 2018-10-21 19:39:26 Paper:  https://arxiv.org/pdf/1810 ...

  5. CSS基础学习(二) 之 width min-width max-width属性

    width 1. 设置元素内容区(content area)的宽度. 2. 如果box-szing属性设置为border-box,width表示border area的宽度,如下图 min-width ...

  6. U3D外包团队—技术分享 U3d中获得物体的size

    以size的x方向为例 1:gameObject.renderer.bounds.size.x;//这个值的结果真实反应出有MeshRenderer这个组件的模型的尺寸.不需要再乘以localScal ...

  7. vue--显示和隐藏

    一.v-if 判断通常是对用户行为的判断 用js来控制,则是使用if语句进行判断,而vue也提供了一个类似if语句的指令——v-if实现条件判断 首先在数据项里设置变量 data() { return ...

  8. Struts2 环境配置

    1.下载struts2开发包 2.将apps中的 Struts-blank.war 解压,里面的 lib 中就是所需jar包 3.新建一个web project项目,将jar包导入复制粘贴到lib中 ...

  9. ubuntu 16.04 的IP地址变更

    网上google 出来的,全是让你变更 /etc/network/interfaces 这个文件. 可是,我以前设置过的静态地址,全没反映在这个文件里. 这回再变更的话,肯定也不是这个. 然后进入/e ...

  10. [Oracle11g] 通过伪列查询

    oracle中的伪列默认第一行是1,所以可以选择<=rownum的方法选取,但是>是无法选取的.这时候需要固化伪列. 固化前可以这样查询:select * from  表名 where r ...