首頁 > 文章 > web前端 > 手機網頁中輸入框被輸入法遮擋怎麼辦？

手機網頁中輸入框被輸入法遮擋怎麼辦？

小云云原創: 2018-05-12 16:14:164254瀏覽

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

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

前提

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);
 //在输入框获取焦点后，窗口改变的话，执行事件
 $(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獲取焦點，輸入框才彈出導致窗口大小改變。

再視窗大小改變事件發生之後，判斷輸入框是否被遮罩（即不在視窗的視覺範圍內），所採用的方法是用視覺視窗的高度（$(window).height() ）是否大於輸入框的底部（input.offset().top+input.offset().height-document.body.scrollTop）因為input.offset().top表示的是元素離文檔頭部的位置，要算元素離可視視窗頭部的位置，可以再減去捲軸滾動了多少。以上是判斷元素是否在可視視窗底部。

手機網頁中輸入框被輸入法遮擋怎麼辦？

相關文章