完美解決手機網頁中輸入框被輸入法遮擋的問題

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

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

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

前提

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(){
  //判斷當前輸入框是否在可視窗口之外（下面）
  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，在有輸入法的時候，根據情況用bottom。在input獲取焦點且窗口重設的時候（即輸入框彈出），注意先綁定input的focus事件，再綁定窗口改變的事件，因為在手機上，是input獲取焦點，輸入框才彈出導致窗口大小改變。

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

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

您可能感興趣的文章: