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

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

    VI是unix上最常用的文本编辑工具,我自己电脑上面也装了VIM编辑器,这个据称是程序员码字神器我实在没觉得那里舒服了,所以又用回了自己的Sublime.这里整理下vi常用操作,如果以后直接在Linu ...

  2. maven系列--eclipse的m2插件

    工欲善其事,必先利其器.我是讨厌用CMD指令来操作maven,既然eclipse已经给我们提供了插件,那我们为什么不使用呢?而且我觉得eclipse的各种插件都挺好用的.好了废话不多说了,现在开始整理 ...

  3. eclipse中注释的代码依然会执行的解决方法

    问题: eclipse中注释的代码在debug的时候居然还能执行.那一刻内心是崩溃的.. 解决方案: 项目重编译显示都正常,并没有报错,然后发现项目编译后,WEB-INF/lib/classes中的c ...

  4. test for python urllib

    #!/usr/bin/python import urllib2 import time import logging import threading succCount = 0 failCount ...

  5. servlet 监听器分类

    http://blog.csdn.net/cxg200888/article/details/77894842

  6. Using $this when not in object context in

    错误信息:$this引用没有上下文 原因:在PHP5中,static声明的静态方法里不可以使用$this 需要使用self来引用当前类中的方法或是变量. 引用的方法里不可以带$this(示例代码中为g ...

  7. 【转】globk中的控制文件

    globk_comb.cmd * This group must be first eq_file ../tables/eq_renames make_svs ../tables/sat1.apr c ...

  8. ng机器学习视频笔记（一）——线性回归、代价函数、梯度下降基础

    ng机器学习视频笔记(一) --线性回归.代价函数.梯度下降基础 (转载请附上本文链接--linhxx) 一.线性回归 线性回归是监督学习中的重要算法,其主要目的在于用一个函数表示一组数据,其中横轴是 ...

  9. c# Char && string

    char 支持的方法 字符串 声明字符串 String str = [null]; 可以用此方法声明一个空字符串   连接字符串 str +"" + str1; 比较两个字符串 C ...

  10. 从一道Python面试题说起（大神勿入）

    作为一个自学Python的小白,在了解了点皮毛之后,便按捺不住自己内心的骚动,在某招聘网站上投了些简历,居然也收到了面试邀请.第二天到公司,HR废话不多讲,上来就抛出几张A4纸,"先做题吧, ...