手机端软键盘弹出挤压页面的问题

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:86 发布时间:2019-05-10
摘要:解决这个问题的基本思路是: 1、怎样监听软键盘弹起这个事件 2、监听到这个事件后怎样操作才能让页面不被挤压 一、解决在手机页面App中手机软键盘弹出软键盘挤压页面问题 var or

解决这个问题的基本思路是:

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

 

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:手机端软键盘弹出挤压页面的问题

关键词:

最火资讯