该文章为转载

我们在做移动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. 编译器工具 Flex Bison for Windows 简单入门例子

    最近从事一个系统仿真软件的开发,里面定义了自己的描述性语言MSL, MSL语言经FlexBison转换成C语言,然后用C编译器来编译并计算仿真. 现在领域驱动开发比较热门,有机会定义自己的语言对程序员 ...

  2. 5.python(迭代器,装饰器,生成器,基本算法,正则)

    一,迭代器 1.迭代器  (1)迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,知道所有的元素被访问完结束.迭代器只能往前不会后退.  (2)对于原生支持随机访问的数据结构(如t ...

  3. Unity3d - RPG项目学习笔记(一)

    通过NGUI和工程素材,学习泰课项目——黑暗之光. 现阶段心得整理: 一.开始界面 开始界面显示顺序为:①白幕渐隐:②镜头拉近:③标题渐显:④按键响应. 1.1 白幕渐隐 NGUI是一个非常强大的插件 ...

  4. LPHW-积累-ex1-6

    Learn Python The Hard Way  ex0  介绍了各个操作系统下python的安装:强调了初学者最好使用简单的编辑器,不要使用IDE环境 ex1 使用 print 输出简单的字符串 ...

  5. 河南多校大一训练赛 D

    题目链接:http://acm.hust.edu.cn/vjudge/contest/125004#problem/D 密码:acm Description If an integer is not ...

  6. appium执行iOS测试脚本并发问题

    appium1.4.X+iOS9.X+xcode7.X: appium1.4.x+iOS9.x+xcode7.x,这一整套的配置做移动端自动化测试是测试人员常用的测试框架.关于,这一套测试框架的并发问 ...

  7. [系统运维]Supervisord安装和启动程序

    supervisord 是client/server 系统 把不是守护进程的进程变成守护进程 监控它自己启动的进程,类似于看门狗 可以作为开机启动的一种封装 可以精确控制进程的状态,而不是pidfil ...

  8. .net core 获取客户端ip

    1.NUGET安装 Microsoft.AspNetCore.Http 2.在 startup.cs 的 ConfigureServices 中注入 services.AddSingleton< ...

  9. 使用 VS Code 开发和调试 .NET Core 程序

    电脑不想装几十个G的 VS2017,那就用 VS Code 吧 目标: 创建一个类库项目 Skany.Core,并用 Nuget 引用第三方组件 Hash 实现加密算法 创建一个单元测试项目 Skan ...

  10. laravel框架生產vender文件夹

    方法一.修改拓展 去php.ini中查看下面三个扩展项是否开启 extension=php_fileinfo.dll extension=php_mbstring.dll extension=php_ ...