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

这种问题，我们一般会使用的方法是一个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. sql 时间转换问题 from_unixtime() UNIX_TIMESTAMP()

    http://blog.csdn.net/test_soy/article/details/50328367 from_unixtime()是MySQL里的时间函数 date为需要处理的参数(该参数是 ...

  2. linux_快照和克隆

    什么是快照? 操作虚拟机时候,想保存当前状态为以后操作失误快速那时保存的系统状态,想当于对系统的版本管理,每个节点之间可以互相切换 什么是克隆? 可以选择快照和当前状态,可选择链接克隆和完整克隆 链接 ...

  3. junit4X系列--Runner解析

    前面我整理了junit38系列的源码,那junit4X核心代码也基本类似.这里我先转载一些关于junit4X源码解析的好文章.感谢原作者的分享.原文地址:http://www.blogjava.net ...

  4. Linux cp 移动的时候报错

    报错如下: cp: omitting directory `./nginx-1.12.1'   原因: 要移动的目录下还存在有目录   解决: cp -r 文件名 地址   注意: 这里的-r代表递归 ...

  5. PMS 启动流程

    1.在SystemServer中启动PackageManagerService.main 2.newPackageManagerService()并添加到ServiceManager中 3.newin ...

  6. 二级缓存：EHCache的使用

    EHCache的使用 在开发高并发量,高性能的网站应用系统时,缓存Cache起到了非常重要的作用.本文主要介绍EHCache的使用,以及使用EHCache的实践经验. 笔者使用过多种基于Java的开源 ...

  7. 锐捷配置telnet

    .组网需求 通过Telnet功能远程登录管理设备.   二.组网拓扑   三.配置要点 1.需要给交换机配置一个管理IP,如果PC与交换机不是同一个网段,需要给交换机配置一个默认网关 2.需要配置一个 ...

  8. Electron 打包Mac安装包代码签名问题解决方案Could not get code signature for running application

    最近一直在做electron应用的打包,集成mac版本的自动更新时出现了问题. Error: Could not get code signature for running application ...

  9. chrome disable-web-security 关闭安全策略 解决跨域

    Chrome 跨域访问线上接口 时间:2016-04-21 作者:zhongxia 前后端分离之后,联调的时候就会出现问题,那就是Ajax跨域问题. 跨域问题的解决方案有很多种比如常规的 后端使用CR ...

  10. iOS UITableView左滑操作功能的实现（iOS8-11）

    WeTest 导读 本文主要是介绍下iOS 11系统及iOS 11之前的系统在实现左滑操作功能上的区别,及如何自定义左滑的标题颜色.字体大小. 一.左滑操作功能实现 1.如果左滑的时候只有一个操作按钮 ...