该文章为转载

我们在做移动web应用的时候，常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部。但在IOS的safari和webview中，对position:fixed的支持不是很好（在IOS5之前甚至还不支持position:fixed）。我遇到的其中一个问题就是，在iOS6+环境下，input focus弹出输入法的时候，设置了position fixed的input框浮在页面上了，而不是吸附在软键盘上。效果如图（图片来源于网上）：

而Android则完全没这个问题，唉。那么我们只能针对IOS作兼容处理了。网上搜索了一通都没能找到比较适合的解决方案（不打算用iScroll），无奈只得自己想办法解决。琢磨良久后想到个折衷的办法：用position:absolute以及通过js动态移动输入框的位置来模拟position:fixed的效果，同时给window对象绑定一个滚动事件，让input框往下移动的时候，能时刻紧贴着软键盘。

于是问题来了，这个移动的位置应该是多少呢？

对图片作像素级分析+debug得知，输入框是被居中了。也就是说，输入框到窗口顶部的距离等于它到软键盘顶部的距离。不难算出，这个距离为 $('input').offset().top - $(window).scrollTop()。于是后面的问题就迎刃而解了。需要说明的是，兼容后的效果肯定比不上原生的position:fixed，但相比浮在页面来说还是要好不少吧。

基于zepto的主要代码实现如下：
$('input').focus(function(){
        var _this = this;

//无键盘时输入框到浏览器窗口顶部距离
        var noInputViewHeight = $(window).height() - $(_this).height();

//网页正文内容高度
        var contentHeight = $(document).height() - $(_this).height();

//控制正文内容高度大于一屏，保证输入框固定底部
        contentHeight = contentHeight > noInputViewHeight ? contentHeight : noInputViewHeight;

//因为弹出输入法需要时间，需延时处理
        setTimeout(function(){

//弹出输入法时滚动条的起始滚动距离
                var startScrollY = $(window).scrollTop();

//弹出输入法时输入框到窗口顶部的距离，即到软键盘顶部的起始距离
                var inputTopHeight = $(_this).offset().top - startScrollY;

//弹出输入法时输入框预期位置，即紧贴软键盘时的位置。因输入框此时处于居中状态，所以其到窗口顶部距离即为需往下移动的距离。
                var inputTopPos = $(_this).offset().top + inputTopHeight;

//控制div不超出正文范围
                inputTopPos = inputTopPos > contentHeight ? contentHeight : inputTopPos;

//设置输入框位置使其紧贴输入框
                $(_this).css({'position':'absolute', 'top':inputTopPos });

//给窗口对象绑定滚动事件，保证页面滚动时div能吸附软键盘
                $(window).bind('scroll', function(){

//表示此时有软键盘存在，输入框浮在页面上了
                        if (inputTopHeight != noInputViewHeight) {

//页面滑动后，输入框需跟随移动的距离
                                var offset = $(this).scrollTop() - startScrollY;

//输入框移动后位置
                                afterScrollTopPos = inputTopPos + offset;

//设置输入框位置使其紧贴输入框
                                $(_this).css({'position':'absolute', 'top':afterScrollTopPos });
                        }
                });
        }, 100);
}).blur(function(){//输入框失焦后还原初始状态
        $(".div-input").removeAttr('style');
        $(window).unbind('scroll');
});

ps : 以上代码在IOS6&7 safari中测试通过，IOS5及之前的版本没做测试。Android因为完美支持position:fixed则无需考虑此兼容方法。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

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

<title>解决IOS safari在input focus弹出输入法时不支持position fixed的问题</title>

<style type="text/css" rel="stylesheet">

input {position: fixed; bottom:2px; width: 90%; height:30px; font-size: 30px}

</style>

</head>

<body>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<input type="text" />

<script type="text/javascript" src="zepto.min.js"></script>

<script type="text/javascript">

//只作用于输入框获得焦点时

$('input').focus(function(){

    var _this = this;

    //无键盘时输入框到浏览器窗口顶部距离

    var noInputViewHeight = $(window).height() - $(_this).height();

    //网页正文内容高度

    var contentHeight = $(document).height() - $(_this).height();

    //控制正文内容高度大于一屏，保证输入框固定底部

    contentHeight = contentHeight > noInputViewHeight ? contentHeight : noInputViewHeight;

    //因为弹出输入法需要时间，需延时处理

    setTimeout(function(){

        //弹出输入法时滚动条的起始滚动距离

        var startScrollY = $(window).scrollTop();

        //弹出输入法时输入框到窗口顶部的距离，即到软键盘顶部的起始距离

        var inputTopHeight = $(_this).offset().top - startScrollY;

        //弹出输入法时输入框预期位置，即紧贴软键盘时的位置。因输入框此时处于居中状态，所以其到窗口顶部距离即为需往下移动的距离。

        var inputTopPos = $(_this).offset().top + inputTopHeight;

        //控制div不超出正文范围

        inputTopPos = inputTopPos > contentHeight ? contentHeight : inputTopPos;

        //设置输入框位置使其紧贴输入框

        $(_this).css({'position':'absolute', 'top':inputTopPos });

        //给窗口对象绑定滚动事件，保证页面滚动时div能吸附软键盘

        $(window).bind('scroll', function(){

            //表示此时有软键盘存在，输入框浮在页面上了

            if (inputTopHeight != noInputViewHeight) {

                //页面滑动后，输入框需跟随移动的距离

                var offset = $(this).scrollTop() - startScrollY;

                //输入框移动后位置

                afterScrollTopPos = inputTopPos + offset;

                //设置输入框位置使其紧贴输入框

                $(_this).css({'position':'absolute', 'top':afterScrollTopPos });

            }

        });

    }, 100);

}).blur(function(){//输入框失焦后还原初始状态

    $(".div-input").removeAttr('style');

    $(window).unbind('scroll');

});

</script>

</body>

</html>

解决IOS safari在input focus弹出输入法时不支持position fixed的问题的更多相关文章

  1. MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题

    解决弹出输入法时页面高度变小导致底部上浮的问题 在有输入框的页面,当输入法弹出的时候,底部元素上浮遮盖了输入框,影响页面美观及功能.查找了一下,页面变窄是不可避免的.即使是设置绝对固定也是不可以的.因 ...

  2. ios下input focus弹出软键盘造成fixed元素位置移位

    正常状态下 input focus软键盘弹出时 问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3 ...

  3. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  4. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  5. 手机端input获取焦点弹出键盘时挡住input解决方案

    问题重现 原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有 ...

  6. Android实现弹出输入法时，顶部固定，中间部分上移的效果

    前言 最近做项目时碰到一个问题,在意见反馈里面,提交按钮写到顶部,当用户输入反馈意见或者邮箱手机号时,弹出的输入法会上移整个页面,导致提交按钮显示不了. 很明显,这样的界面是非常不友好的,找了一些资料 ...

  7. 解决iOS Xcode 模拟器键盘不弹出

    1. 选中模拟器,在屏幕上方的菜单中找到Hardware->Keyboard 2. 直接快捷键shift+command+k

  8. IOS微信点击input弹出输入法，关闭后页面留白解决方案

    场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局             解决方法: 给input添加 ...

  9. 点击input触发弹出框的bug

    先点击第一个input建立弹出框,再点击第二个input打开弹出框,操作点击,同时触发了两个input点击事件.主要原因是建立弹出框时绑定了input1的click事件,再次触发时,又再亿次绑定了in ...

随机推荐

  1. LeetCode OJ 42. Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  2. chapter 12_2 保存无环的table

    保存table有几种方法,选用哪种方法取决于对table的结构作出了哪些限制性的假设 第一个方法: function serialize(o) if type(o) == "number&q ...

  3. NOIP2014-普及组复赛-第三题-螺旋矩阵

    题目描述 Description 一个n行n列的螺旋矩阵可由如下方法生成: 从矩阵的左上角(第1行第1列)出发,初始时向右移动:如果前方是未曾经过的格子,则继续前进,否则右转:重复上述操作直至经过矩阵 ...

  4. 如何利用 MembershipUser 更改密码

    如何利用 MembershipUser 更改密码 作者: vkvi 来源:千一网络 (原创) 时间: 2009-3-11   完美集成.增强 KindEditor HTML 编辑器 在 ASP.NET ...

  5. 关于springboot启动时候报错:springboot Failed to parse configuration class [Application]

    把运行的java类放在一个package下后就不再提示这个错误. 使用的ide是intellij,之前也有因为没有创建package报错的经历,可能这是intellij必须的

  6. 2015 Multi-University Training Contest 10

    1001 CRB and Apple 1002 CRB and Candies 1003 CRB and Farm 1004 CRB and Graph 1005 CRB and His Birthd ...

  7. 【Machine Learning in Action --5】逻辑回归（LogisticRegression）

    1.概述 Logistic regression(逻辑回归)是当前业界比较常用的机器学习方法,用于估计某种事物的可能性. 在经典之作<数学之美>中也看到了它用于广告预测,也就是根据某广告被 ...

  8. ASP.NET之.NET FrameWork框架

    .NET FrameWork框架 是一套应用程序开发框架,主要目的提供一个开发模型. 主要的两个组件: 公共语言运行时(Common Language Runtime)(CLR): 提供内存管理.线 ...

  9. Position & anchorPoint 深入

    引言 相信初接触到CALayer的人都会遇到以下几个问题: 为什么修改anchorPoint会移动layer的位置?CALayer的position点是哪一点呢?anchorPoint与positio ...

  10. JS获取当前使用的浏览器名字以及版本号

    JS获取当前使用的浏览器名字以及版本号 工作中需要通过JS去获取当前使用的浏览器的名字以及版本号,网上大堆资料都有一个关键词是 navigator.appName,但是这个方法获取的浏览器的名字只有两 ...