完美解決手機網(wǎng)頁中輸入框被輸入法遮擋的問題

更新時間：2017年12月19日 14:37:51 作者：小魔仙Cool

下面小編就為大家分享一篇完美解決手機網(wǎng)頁中輸入框被輸入法遮擋的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

之前要做一個彈出對話框，填寫信息，發(fā)現(xiàn)在手機上看的時候，較后的輸入框在填寫信息時，輸入框被輸入法遮擋，只能盲填。

前提

1.彈出的對話框用display:fixed定位的

2.對話框大小固定

解決辦法

css部分

（dlg-top與dlg-bottom為對話框的類，用于確定對話框的定位方式）

.dlg-top{
 position: fixed;
 top:100px;
 left:10%;
}
.dlg-bottom{
 position: fixed;
 bottom:0px;
 left:10%;
}

js部分

“deliver-dlg”為對話框的類

//彈出對話框時，綁定的事件
//綁定輸入框獲取焦點事件
$(".deliver-dlg input,.deliver-dlg textarea").focus(function(){
 var input=$(this);
 //在輸入框獲取焦點后，窗口改變的話，執(zhí)行事件
 $(window).resize(function(){
  //判斷當(dāng)前輸入框是否在可視窗口之外（下面）
  if($(window).height()-(input.offset().top+input.offset().height-document.body.scrollTop)<0){
   //對話框定位方式改為bottom
   $(".deliver-dlg").removeClass("dlg-top").addClass("dlg-bottom");
  }
  else{
   $(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
  }
 });
});
//取消對話框時，取消事件綁定
$(".deliver-dlg input").unbind();
$(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
$(window).unbind();

思路解析

簡單點說就是改變對話框的定位方式，在默認情況下用top，在有輸入法的時候，根據(jù)情況用bottom。在input獲取焦點且窗口重設(shè)的時候（即輸入框彈出），注意先綁定input的focus事件，再綁定窗口改變的事件，因為在手機上，是input獲取焦點，輸入框才彈出導(dǎo)致窗口大小改變。

再窗口大小改變事件發(fā)生之后，判斷輸入框是否被遮（即不在窗口的可視范圍內(nèi)），采用的辦法是用可視窗口的高度（$(window).height()）是否大于輸入框的底部（input.offset().top+input.offset().height-document.body.scrollTop）因為input.offset().top表示的是元素離文檔頭部的位置，要算元素離可視窗口頭部的位置，可以再減去滾動條滾動了多少。以上是判斷元素是否在可視窗口底部。

以上這篇完美解決手機網(wǎng)頁中輸入框被輸入法遮擋的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: