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

Posted 2020-09-30

问题描述：当输入框在最底部时，点击软键盘后，输入框会被遮挡。
解决方案：在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);
    }
})