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

这种问题，我们一般会使用的方法是一个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. list类型

    list是一个链表结构,可以模拟栈,队列 lpush list中压入一个元素   模拟栈 lrange  取出list的中的元素(0 -1 表示从头取到尾) rpush list中压入一个元素   模 ...

  2. Java线程-异常处理

    在Java多线程程序中,所有线程都不允许抛出未捕获的checked exception,也就是说各个线程需要自己把自己的checked exception处理掉.这一点是通过java.lang.Run ...

  3. robotframework安装及入门指南

    将很久之前自己在本地记录的一些笔记发表到随笔来,希望能够帮到一些童鞋~ robotframework安装及入门指南 本文主要介绍robotframework在windows环境的安装过程! 安装步骤 ...

  4. MoonLight可视化订单需求区域分析系统前端

    MoonLight可视化订单需求区域分析系统实现功能: 在现实生活中,计算机和互联网迅速发展,人们越来越趋向于网络,于是我们就有了各种各样的系统,来帮助我们更好地生活.比如对于打车来说,我们也可以通过 ...

  5. MS SQL 监控磁盘空间告警

    这几天突然有个想法:希望能够自动监控.收集数据库服务器的磁盘容量信息,当达到一个阀值后,自动发送告警邮件给DBA,将数据库磁盘详细信息告知DBA,提醒DBA做好存储规划计划,初步的想法是通过作业调用存 ...

  6. RecyclerView用法

    主界面布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  7. 00_HTML入门第一天

    HTML入门 body标记的常见属性:bgcolor 设置背景颜色:text 设置文本颜色:link 设置链接颜色:vlink 设置已经访问了的链接颜色:alink 正在点击的链接颜色: meta是单 ...

  8. CU社区shell板块awk十三问整理

    CU社区shell板块awk十三问整理 一.RS="" 当 RS="" 时,会将\n强制加入到FS变量中,因为RS为空时,是将连续多空行作为分隔符,近似于\n\ ...

  9. 【转】shell学习笔记（一）——学习目的性、特殊字符、运算符等

    1 学习shell的目的性 写之前我们先来搞清楚为什么要学shell,学习要有目的性 shell简单.灵活.高效,特别适合处理一些系统管理方面的小问题 shell可以实现自动化管理,让系统管理员的工作 ...

  10. 覆盖equals()时总要覆盖hashCode()

    覆写如下: public class User{ private Integer id; private String userName; private String passWord; publi ...