码迷,mamicode.com
首页 > 其他好文 > 详细

软键盘被唤醒后,页面元素被遮挡

时间:2017-07-30 21:59:40      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:addclass   描述   弹窗   nbsp   size   设置   function   func   底部   

问题描述:当输入框在最底部时,点击软键盘后,输入框会被遮挡。
解决方案:在input的focus事件中触发window的resize事件。

var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
  if($(document).height() < oHeight){
    $("#footer").css("position","static");
  }else{ 
    $("#footer").css("position","absolute");
  }    
});

问题描述:页面弹窗有一个输入框,input获得焦点时,弹出的输入键盘会把弹层挤上去,有可能导致弹层一部分被隐藏。
解决方案:在input的focus事件中触发window的resize事件,通过判断页面的高是否变小,来重新设置弹层的样式。

var winHeight=$(‘window‘).height();
$(‘window‘).resize(function(){
    if($(‘window‘).height() < winHeight){
      popWin.addClass(‘on‘);
    }else{
      popWin.removeClass(‘on‘);
      var topShow=parseInt((winHeight-popWin.height())/2);
      popWin.css(‘top‘,topShow);
    }
})

 

软键盘被唤醒后,页面元素被遮挡

标签:addclass   描述   弹窗   nbsp   size   设置   function   func   底部   

原文地址:http://www.cnblogs.com/camille666/p/focus_input_hide_some_domele.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!