您的位置:首页 > 移动开发

移动端IOS 固定下方的输入框,点击输入框位置会变的修复

2017-02-24 17:01 267 查看
          if(data=="ios"){
var _this = $(".publish");

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

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

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

$('#txt_question').focus(function(){
iosinput = 1;
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});
$(_this).addClass("cate52");

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

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

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

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

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

}, 1000);
})

$('#txt_question').blur(function(){
iosinput = 0;
//输入框失焦后还原初始状态
$(_this).removeAttr('style');
$(_this).removeClass("cate52");
$(window).unbind('scroll');				})
}


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐