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

      

  • 相关阅读:
    .Net 4.0 之并行运算(Parallel)(For、Foreach)
    【POJ】3494 Largest Submatrix of All 1’s
    【POJ】2676 Sudoku
    【POJ】3250 Bad Hair Day
    【SPOJ】11578 A Famous City
    【POJ】3740 Easy Finding
    【HUST】1017 Exact cover
    【POJ】3074 Sudoku
    【ZOJ】3209 Treasure Map
    【POJ】3076 Sudoku
  • 原文地址:https://www.cnblogs.com/share123/p/6439294.html
Copyright © 2011-2022 走看看