zoukankan      html  css  js  c++  java
  • 手机软键盘谈起挤压页面问题

    解决问题的根本思路是: 

    1、怎样监听软键盘弹起这个事件

    2、监听到这个事件后怎样操作才能让页面不被挤压

    一、解决手机页面App中手机软键盘弹出软键盘挤压页面问题

    var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;	
    	window.onresize=function(){
    	    var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
    	    //软键盘弹起与隐藏  都会引起窗口的高度发生变化
    	    if(resizeHeight*1<originalHeight*1&&isfocus==true){ //resizeHeight<originalHeight证明窗口被挤压了
    	       plus.webview.currentWebview().setStyle({
    	            height:originalHeight
    	       });
    	    }
    	}  
    

      

    plus.webview.currentWebview().setStyle({
      softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度
    });
    

      

    二、解决在浏览器中打开网页软键盘挤压页面问题

    	//手机端解决键盘挤压问题模块 
    	//获取原始窗口的高度 
    	var isfocus=false;
    	var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;	
    	window.onresize=function(){
    	    var  resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
    	    //软键盘弹起与隐藏  都会引起窗口的高度发生变化
    	    if(resizeHeight*1<originalHeight*1&&isfocus==true){ //resizeHeight<originalHeight证明窗口被挤压了
    		$('.hideBtn').css('display','none');
    	    }else{
    	    	$('.hideBtn').css('display','block');  
    	    }
    	}  
    	$("input").focus(function(){
    		isfocus=true;
    		
    	});
     	$("input").blur(function(){
    		isfocus=false;
    	})

     

      

    DO What You Want !
  • 相关阅读:
    C++数据类型之实型(浮点型)&科学计数法
    C++之数据类型--整形&sizeof关键字
    C++之关键字&标识符命名规则
    C++之常量
    C++之变量
    zabbix3.x添加华为(93069306)网络设备详解
    一些最常见的SNMP的OID自动翻译成zabbix数字进行表示(华为9306)
    Linux:日期用法,及格式定义
    linux awk命令详解
    Bash常用快捷键及其作用
  • 原文地址:https://www.cnblogs.com/liumengdie/p/7879133.html
Copyright © 2011-2022 走看看