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

这种问题，我们一般会使用的方法是一个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输入框兼容问题的更多相关文章

  1. 解决IOS滑动页面fixed浮动问题

    <div style="position: fixed"></div> <div style="height: 100%; overflow ...

  2. 在Windows笔记本上调试运行在iOS设备上的前端应用

    我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备.我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统. 有的时候一个开发好 ...

  3. 【转】使IFRAME在iOS设备上支持滚动

    原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚 很长时间以来, iOS设备上Safari中超出边界的元素将 ...

  4. 使IFRAME在iOS设备上支持滚动

    原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不 ...

  5. Safari 前端开发调试 iOS 完美解决方案

    转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05      0个评论    来源:Safari ...

  6. web前端开发与iOS终端开发的异同[转]

    * {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-fami ...

  7. 不通过App Store，在iOS设备上直接安装应用程序(转)

    今天在iOS设备上安装天翼云存储app,在safari上直接打开http://cloud.189.cn/wap/index.jsp,点击“点击免费安装”,如下图: 神奇的事情发生了,设备上直接下载ap ...

  8. jquery keyup 在IOS设备上输入中文时不触发

    今天做一个异步查询功能的时候发现在IOS设备上查询中文时keyup没有触发,在其他设备上时可以的,后来在stackoverflow上找到下面这种解决方法,贴出来算是抛砖引玉了. $h_input.on ...

  9. 怎样将游戏从Unity导到iOS设备上

    当我开始开发自己的iOS游戏时,我会考虑的第一件事便是如何将其导出到设备中,如此有效地测试我的游戏.最初,该过程看似很长且复杂,我所遇到的主要问题是,尽管存在许多资源,但是它们并非完全来自同样的地方, ...

随机推荐

  1. Java calendar获取月份注意事项

    Calendar中月份month得取值是从0开始,到11,对应着日历中的1-12月.所以在用此取月份的话,需要在原有基础上加1.

  2. js_10_dom表单

    事件的优先级? 先执行事件,后执行标签内置事件,如果事件返回false不执行后面的事件或标签内置事件 如何通过js提交表单? 任意标签定义onclick事件 函数中写入:document.getEle ...

  3. python_如何定义装饰器类？

    案例: 实现一个能将函数调用信息记录到日志的装饰器 需求: 把每次函数的调用时间,执行时间,调用次数写入日志 可以对被装饰函数分组,调用信息记录到不同日志 动态修改参数,比如日志格式 动态打开关闭日志 ...

  4. jquery判断数据类型和相同字符串不相等

    typeof object返回object对象数据类型 encodeURIComponent(str)//可把字符串作为URI 组件进行编码. 若str1和str2字符串数值相同,encodeURIC ...

  5. 【转】Awk 命令学习总结、AWk命令系列学习（linux shell)

    前面的话 学习linux 的同人,都知道linux shell文本处理能力非常强大.有一组强大的文本处理工具:grep,sed,awk . 其中grep 经常用作查找匹配文本.sed用作文本编辑替换. ...

  6. C# 类型基础（上）

    C#类型都派生自System.Object 祖先的优良传统:Object的公共方法 Equals: 对象的同一性而非相等性 GetHashCode:返回对象的值的哈希码 ToString:默认返回类型 ...

  7. re模块与正则表达式

    一.正则表达式概念 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科 ...

  8. WPF中，多key值绑定问题，一个key绑定一个界面上的对象

    问题说明: 当用到dictionary<key,value>来储存数据的时候,有时候需要在界面上绑定一个key来显示value,这时候有两种思路: 一种是写一个自定义的扩展类,类似Bind ...

  9. linux命令dd

    原文链接: http://blog.csdn.net/adaptiver/article/details/6672592 dd 使用dd这个linux命令可以创建一定大小文件. linux创建文件命令 ...

  10. BZOJ 2006: [NOI2010]超级钢琴 [ST表+堆 | 主席树]

    题意: 一个序列,求k个不相同的长度属于\([L,R]\)的区间使得和最大 前缀和,对于每个r找最小的a[l] 然后我yy了一个可持久化线段树做法...也许会T 实际上主席树就可以了,区间k小值 然后 ...