欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

完美解決手機網(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(){
  //判斷當前輸入框是否在可視窗口之外(下面)
  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獲取焦點且窗口重設的時候(即輸入框彈出),注意先綁定input的focus事件,再綁定窗口改變的事件,因為在手機上,是input獲取焦點,輸入框才彈出導致窗口大小改變。

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

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

相關(guān)文章

最新評論