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

                  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');				})
			}                        

  

转载于:https://www.cnblogs.com/share123/p/6439294.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值