该文章为转载

我们在做移动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则无需考虑此兼容方法。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  6. <title>解决IOS safari在input focus弹出输入法时不支持position fixed的问题</title>
  7. <style type="text/css" rel="stylesheet">
  8. input {position: fixed; bottom:2px; width: 90%; height:30px; font-size: 30px}
  9. </style>
  10. </head>
  11.  
  12. <body>
  13.  
  14. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  15. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  16. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  17. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  18. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  19.  
  20. <input type="text" />
  21.  
  22. <script type="text/javascript" src="zepto.min.js"></script>
  23. <script type="text/javascript">
  24. //只作用于输入框获得焦点时
  25. $('input').focus(function(){
  26.     var _this = this;
  27.     //无键盘时输入框到浏览器窗口顶部距离
  28.     var noInputViewHeight = $(window).height() - $(_this).height();
  29.     //网页正文内容高度
  30.     var contentHeight = $(document).height() - $(_this).height();
  31.     //控制正文内容高度大于一屏，保证输入框固定底部
  32.     contentHeight = contentHeight > noInputViewHeight ? contentHeight : noInputViewHeight;
  33.     //因为弹出输入法需要时间，需延时处理
  34.     setTimeout(function(){
  35.         //弹出输入法时滚动条的起始滚动距离
  36.         var startScrollY = $(window).scrollTop();
  37.         //弹出输入法时输入框到窗口顶部的距离，即到软键盘顶部的起始距离
  38.         var inputTopHeight = $(_this).offset().top - startScrollY;
  39.         //弹出输入法时输入框预期位置，即紧贴软键盘时的位置。因输入框此时处于居中状态，所以其到窗口顶部距离即为需往下移动的距离。
  40.         var inputTopPos = $(_this).offset().top + inputTopHeight;
  41.         //控制div不超出正文范围
  42.         inputTopPos = inputTopPos > contentHeight ? contentHeight : inputTopPos;
  43.         //设置输入框位置使其紧贴输入框
  44.         $(_this).css({'position':'absolute', 'top':inputTopPos });
  45.         //给窗口对象绑定滚动事件，保证页面滚动时div能吸附软键盘
  46.         $(window).bind('scroll', function(){
  47.             //表示此时有软键盘存在，输入框浮在页面上了
  48.             if (inputTopHeight != noInputViewHeight) {
  49.                 //页面滑动后，输入框需跟随移动的距离
  50.                 var offset = $(this).scrollTop() - startScrollY;
  51.                 //输入框移动后位置
  52.                 afterScrollTopPos = inputTopPos + offset;
  53.                 //设置输入框位置使其紧贴输入框
  54.                 $(_this).css({'position':'absolute', 'top':afterScrollTopPos });
  55.             }
  56.         });
  57.     }, 100);
  58. }).blur(function(){//输入框失焦后还原初始状态
  59.     $(".div-input").removeAttr('style');
  60.     $(window).unbind('scroll');
  61. });
  62. </script>
  63.  
  64. </body>
  65. </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. 一个简单的IM系统（Demo附源码）－－ ESFramework 4.0 快速上手（08）

    前面的文章已经介绍完了基于ESFramework/ESPlus进行二次开发的所有要点,现在,我们可以开始小试牛刀了. 本文将介绍使用ESFramework的Rapid引擎开发的两个最简单的Demo,E ...

  2. Java 容器一些知识

    一.Collection 1.static 方法: Collections.sort(List<T>):实现List排序功能 Collections.fill(List<T> ...

  3. php随意笔记

    local(局部) global(全局)global 关键词用于访问函数内的全局变量.$GLOBALS[index] 的数组中存储了所有的全局变量.这个数组在函数内也可以访问,并能够用于直接更新全局变 ...

  4. Understanding Neural Networks Through Deep Visualization

    当数据一层一层通过更多的卷积层时,你可以得到的特征图像代表的特征就会更加的复杂. 在网络的最后,你也许可以得到一个抽象的物体.如果你想通过可视化方法在卷积神经网络中看到更多的信息.这里有一个工具方便你 ...

  5. 神经网络工具箱nntool的使用方法

    关于如何使用nntool神经网络工具箱进行“数据训练”的方法: 1. 在命令窗口键入nntool命令打开神经网络工具箱: 2. 点击Import按钮两次,分别把输入向量和目标输出加入到对应的窗口([I ...

  6. unity Mesh(网格)的使用

    创建两个三角形合成的矩形网格: GameObject obj= new GameObject(); MeshRenderer meshRenderer=obj.AddComponent<Mesh ...

  7. jQuery实现的简单分页功能的详细解析

    分页功能在项目开发中不可或缺,老司机操作起来就和呼吸一样简单,新手恐怕就会吃力一些. 今天我回顾了一下具体的操作步骤,决定详细的分析一下每一步的实现目的及原理. 我们会创建一个简单的json文件来模拟 ...

  8. 查看apk包及Activity名方法

    查看apk包名方法activity名: 方法一: aapt dump badging +客户端包所在路径+客户端包名称 如: aapt.exe dump badging K:\Apk\fanxing. ...

  9. ios 控件 UIButton

    - (void)setTitle:(NSString *)title forState:(UIControlState)state; //设置标题 - (void)setTitleColor:(UIC ...

  10. jquery为多个元素添加事件

    html <c:forEach items="${modellist}" var="model" varStatus="status" ...