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

      

  • 相关阅读:
    [Jenkins] 批量删除构建历史
    [Android Tips] 32. 解决 Android Device Monitor 在 Mac OS X 卡住
    [Gradle] 查看项目依赖
    [Gradle] 获取 gradle 命令行参数
    [Android Tips] 31.如何将第三库引入的 Permission 删除掉
    [Gradle] 发布构件到本地仓库
    [Android Tips] 30.如何在 Android Studio 中一次性格式化所有代码
    下载安卓应用的历史版本
    设置int、float型数据的输出格式
    头文件limits—各个类型的数据的范围
  • 原文地址:https://www.cnblogs.com/share123/p/6439294.html
Copyright © 2011-2022 走看看