ipad safari html input 不调用软键盘,解决IOS safari在input focus弹出输入法时不支持position fixed的问题...

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

解决方案：

基于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');

});