你的位置:首页 > 软件开发 > Java > 手机端软键盘弹出挤压页面的问题

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

发布时间:2017-12-06 18:00:04
解决这个问题的基本思路是:1、怎样监听软键盘弹起这个事件2、监听到这个事件后怎样操作才能让页面不被挤压一、解决在手机页面App中手机软键盘弹出软键盘挤压页面问题var originalHeight=document.documentElement.clientHeight || ...

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

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

 

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

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

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录