zoukankan      html  css  js  c++  java
  • 移动端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');				})
    			}                        
    

      

  • 相关阅读:
    描述软件质量属性需求和质量属性场景(以淘宝网为例)
    软件架构初识
    机器学习实践02
    机器学习实践01
    机器学习十讲02
    用户故事与敏捷方法阅读笔记05
    机器学习十讲01
    用户故事与敏捷方法阅读笔记04
    tensorflow学习05(Mnist数据集)
    spring boot发送HTTP请求
  • 原文地址:https://www.cnblogs.com/share123/p/6439294.html
Copyright © 2011-2022 走看看