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

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

 更新時間: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表示的是元素離文檔頭部的位置,要算元素離可視窗口頭部的位置,可以再減去滾動條滾動了多少。以上是判斷元素是否在可視窗口底部。

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

相關文章

  • 通過JS判斷網頁是否為手機打開

    通過JS判斷網頁是否為手機打開

    這篇文章主要介紹了通過JS判斷網頁是否為手機打開,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-10-10
  • js判斷元素是否隱藏的方法

    js判斷元素是否隱藏的方法

    這篇文章主要介紹了js判斷元素是否隱藏的方法,需要的朋友可以參考下
    2014-06-06
  • 基于BootStrap Metronic開發(fā)框架經驗小結【一】框架總覽及菜單模塊的處理

    基于BootStrap Metronic開發(fā)框架經驗小結【一】框架總覽及菜單模塊的處理

    這篇文章主要介紹了基于BootStrap Metronic開發(fā)框架經驗小結【一】框架總覽及菜單模塊的處理的相關資料,小編認為非常具有參考借鑒價值,感興趣的朋友一起學習吧
    2016-05-05
  • JavaScript實現京東秒殺效果

    JavaScript實現京東秒殺效果

    這篇文章主要為大家詳細介紹了JavaScript實現京東秒殺效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • echarts學習之如何給餅圖中間添加文字

    echarts學習之如何給餅圖中間添加文字

    這篇文章主要介紹了echarts學習之如何給餅圖中間添加文字問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • js表數據排序 sort table data

    js表數據排序 sort table data

    對于表格的排序,是很不錯的一個功能,方便用戶快速的分析一些數據。
    2009-02-02
  • 利用JS判斷字符串是否含有數字與特殊字符的方法小結

    利用JS判斷字符串是否含有數字與特殊字符的方法小結

    在我們日常工作的時候,利用javaScript判斷一個字符串中是否包括有數字和"-",在一些表單提交的地方,這是比較有用的常規(guī)判斷,這里收集有幾種不同的方法,最后還將簡要介紹下isNAN函數的使用方法和例子,有需要的朋友們可以參考借鑒,下面來一起看看吧。
    2016-11-11
  • JS實現面向對象繼承的5種方式分析

    JS實現面向對象繼承的5種方式分析

    這篇文章主要介紹了JS實現面向對象繼承的5種方式,結合實例形式分析了JavaScript面向對象繼承功能的5種常見實現方法原理與操作技巧,需要的朋友可以參考下
    2018-07-07
  • JS解決url傳值出現中文亂碼的另類辦法

    JS解決url傳值出現中文亂碼的另類辦法

    為什么用表單的方式就可以傳遞中文,而URL的方式就不行了呢?非得用URL傳值的方式才能解決問題嗎?這里我想到了動態(tài)表單,何不用它來解決呢
    2013-04-04
  • 很棒的js Tab選項卡切換效果

    很棒的js Tab選項卡切換效果

    這篇文章主要介紹了很棒的js Tab選項卡切換效果,簡單的選項卡切換特效,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-08-08

最新評論