【前端开发】解决ios设备上fixed浮动的input输入框兼容问题

我们在开发移动端页面时，经常会存在这种需求，在页面顶部或底部有一个输入框，一直浮动在顶部或底部位置，中间部分的内容是可以滚动的。比如底部输入框的搜索功能，或底部输入框的写评论功能。

这种问题，我们一般会使用的方法是一个position:fixed;的div，在里面放一个input，浮动在顶部或底部，其他的内容可以滚动。

这种方法在安卓设备中肯定是没问题的。但是在ios设备中就会有问题了。

问题1：滚动页面内容部分时，浮动部分可能会消失，滚动结束后才展示出来

问题2：点击输入框进行输入时，呼出键盘后，输入框位置漂移了。

如视频效果：

这两个问题，之前在网上确实找过很多方法，也试过，但是都不太理想。

之前因为时间问题，所以就只使用了这种方法：

输入框获取焦点时，得到页面的滚动高度，将输入框div使用absolute绝对定位到当前滚动高度处，并禁止滚动。失去焦点后，将输入框div变回fixed，回到原来样子。

但此方法并不是很理想。只能勉强解决顶部浮动输入框的输入问题，但是页面滚动时，浮动区域消失和底部输入框问题无法得到解决。所以此方法就不适应了。

我们来看看新的方法。（此方法的原理是不适应fixed，全内容的高度就是body的整体高度，这样滚动起来就可以处理这些问题了，关键就是用到了有滚动条的div）

首先我们结构还是一样。页面3个外层div，有顶部input与底部input，中间的可滚动内容通过js计算出来。（这里注意，要关联计算当前页面的所有高度，让内容正好充满一屏）

<div class="fixedTop" alt="顶部不动的div">

    <input type="text" name="" value="输入框1">

</div>

<div class="centerContent"><br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

</div>

<div class="fixedBottom" alt="底部不动的div">

    <input type="text" name="" value="输入框2">

</div>

css

　　　　　*{

            margin:;

            padding:;

        }

        .fixedTop{

            height: 30px;

            width:100%;

            background-color: red;

        }

        .fixedBottom{

            height: 30px;

            width:100%;

            background-color: red;

        }

        .centerContent{

            overflow: auto;/*让div存在滚动条*/

            /*解决ios中滚动div的卡顿问题*/

            -webkit-overflow-scroll:touch;

            -webkit-overflow-scrolling: touch;

        }

        .fixedTop input,.fixedBottom input{

            width: 100%;

            height:30px;

        }

.centerContent的高度通过页面整体高度-顶部div高度-底部div高度获得

js操作：

    var centerContentH=window.innerHeight-$(".fixedTop").height()-$(".fixedBottom").height();//可滚动区域高度

    $(".centerContent").css({"height":centerContentH});

    //底部输入框操作 输入框获取焦点时，将页面滚到最底部去

    $(".fixedBottom input").focus(function(){

        setTimeout(function(){

            $(window).scrollTop(window.innerHeight);

        },500);

    });

用这种方法，我们来看下效果：

看，是不是就实现了

我们来看看全部代码

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta charset="UTF-8">

    <title>解决</title>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <style type="text/css">

        *{

            margin:0;

            padding: 0;

        }

        .fixedTop{

            height: 30px;

            width:100%;

            background-color: red;

        }

        .fixedBottom{

            height: 30px;

            width:100%;

            background-color: red;

        }

        .centerContent{

            overflow: auto;/*让div存在滚动条*/

            /*解决ios中滚动div的卡顿问题*/

            -webkit-overflow-scroll:touch;

            -webkit-overflow-scrolling: touch;

        }

        .fixedTop input,.fixedBottom input{

            width: 100%;

            height:30px;

        }

    </style>

</head>

<body>

<div class="fixedTop" alt="顶部不动的div">

    <input type="text" name="" value="输入框1">

</div>

<div class="centerContent"><br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

</div>

<div class="fixedBottom" alt="底部不动的div">

    <input type="text" name="" value="输入框2">

</div>

<script type="text/javascript">

    var centerContentH=window.innerHeight-$(".fixedTop").height()-$(".fixedBottom").height();//可滚动区域高度

    $(".centerContent").css({"height":centerContentH});

    //底部输入框操作 输入框获取焦点时，将页面滚到最底部去

    $(".fixedBottom input").focus(function(){

        setTimeout(function(){

            $(window).scrollTop(window.innerHeight);

        },500);

    });

</script>

</body>

</html>

整体代码

【前端开发】解决ios设备上fixed浮动的input输入框兼容问题的更多相关文章

解决IOS滑动页面fixed浮动问题
<div style="position: fixed"></div> <div style="height: 100%; overflow ...
在Windows笔记本上调试运行在iOS设备上的前端应用
我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备.我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统. 有的时候一个开发好 ...
【转】使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将 ...
使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不 ...
Safari 前端开发调试 iOS 完美解决方案
转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05 0个评论来源:Safari ...
web前端开发与iOS终端开发的异同[转]
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-fami ...
不通过App Store，在iOS设备上直接安装应用程序(转)
今天在iOS设备上安装天翼云存储app,在safari上直接打开http://cloud.189.cn/wap/index.jsp,点击“点击免费安装”,如下图: 神奇的事情发生了,设备上直接下载ap ...
jquery keyup 在IOS设备上输入中文时不触发
今天做一个异步查询功能的时候发现在IOS设备上查询中文时keyup没有触发,在其他设备上时可以的,后来在stackoverflow上找到下面这种解决方法,贴出来算是抛砖引玉了. $h_input.on ...
怎样将游戏从Unity导到iOS设备上
当我开始开发自己的iOS游戏时,我会考虑的第一件事便是如何将其导出到设备中,如此有效地测试我的游戏.最初,该过程看似很长且复杂,我所遇到的主要问题是,尽管存在许多资源,但是它们并非完全来自同样的地方, ...

随机推荐

es6重点笔记：对象
1,Object.is():比较两个值是否严格相等,es5的'===',不能判断+0和-0,还有NaN,但是es6的Object.is()可以区分 Object.is(+0, -0); // fals ...
jQuery hover() 方法
$("p").hover(function(){ $("p").css("background-color","yellow&qu ...
JQuery判断是否为空
//有如下三种判断 var A=$("#**).val(); if(A==null||A!=undefined||A==""){ //处理 } //参考文章1说下面方法效 ...
Java多线程之线程的通信
Java多线程之线程的通信在总结多线程通信前先介绍一个概念:锁池.线程因为未拿到锁标记而发生的阻塞不同于前面五个基本状态中的阻塞,称为锁池.每个对象都有自己的锁池的空间,用于放置等待运行的线程.这些 ...
linkin大话数据结构--泛型
泛型(Generic) 什么是泛型? java5开始出现的一种对Java语言类型的一种拓展,以支持创建可以按类型进行参数化的类.可以把类型参数看作是使用参数类型时指定的类型占位符,就好比方法的形式参数 ...
ueditor显示内容末尾有多余标记的解决
问题: 最近用了百度的ueditor文本编辑器,出现一个问题,用ueditor存数据到数据库都正常,但是重新读取后赋值到ueditor却会在末尾多出 "> 这两个符号.赋值方式如下: ...
Struts2 (三)
1 Struts2的拦截器 Struts2拦截器在访问某个Action方法之前或之后实施拦截,拦截器是可插拔的,拦截器是AOP的一种实现. Struts2拦截器栈:将拦截器按一定顺序联结成一条链,在访 ...
【转】vim取消高亮显示
vim是vi的加强版. 进入vim或编辑完毕按esc后,输入/可帮助查找字符串,例如/main帮助查找main函数,找到的main高亮显示. 取消高量显示的两个办法: 1)按esc键,输入:nohl ...
linux中编译安装Apache、PHP、MySQL（上）
1.简介在阿里云买了个云服务器,一直没时间折腾.过了近十天了吧,才有时间好好玩玩这个云服务器.自己是做Web开发的,所以我需要的开发环境是LAMP.之前打算是采用yum安装,不过yum安装apach ...
selenium的使用技巧及集成到scrapy
为了爬取拉钩,今天学习了selenum的使用技巧. from scrapy.http import HtmlResponse class JSPageMiddleware(object): ...

【前端开发】解决ios设备上fixed浮动的input输入框兼容问题

【前端开发】解决ios设备上fixed浮动的input输入框兼容问题的更多相关文章

随机推荐

热门专题