解決輸入框被輸入法遮擋的問題

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

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

前提

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表示的是元素離文檔頭部的位置，要算元素離可視視窗頭部的位置，可以再減去捲軸滾動了多少。以上是判斷元素是否在可視視窗底部。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在JS中如何控制滑鼠拒絕點擊按鈕

使用JS如何獲得當前時間差

在js中如何對url實作物件化管理

在JavaScript中如何使用Generator的方法

以上是解決輸入框被輸入法遮擋的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！