完美解決手機(jī)網(wǎng)頁中輸入框被輸入法遮擋的問題
之前要做一個彈出對話框,填寫信息,發(fā)現(xiàn)在手機(jī)上看的時候,較后的輸入框在填寫信息時,輸入框被輸入法遮擋,只能盲填。
前提
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(){ //判斷當(dāng)前輸入框是否在可視窗口之外(下面) 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();
思路解析
簡單點說就是改變對話框的定位方式,在默認(rèn)情況下用top,在有輸入法的時候,根據(jù)情況用bottom。 在input獲取焦點且窗口重設(shè)的時候(即輸入框彈出),注意先綁定input的focus事件,再綁定窗口改變的事件,因為在手機(jī)上,是input獲取焦點,輸入框才彈出導(dǎo)致窗口大小改變。
再窗口大小改變事件發(fā)生之后,判斷輸入框是否被遮(即不在窗口的可視范圍內(nèi)),采用的辦法是用可視窗口的高度($(window).height())是否大于輸入框的底部(input.offset().top+input.offset().height-document.body.scrollTop)因為input.offset().top表示的是元素離文檔頭部的位置,要算元素離可視窗口頭部的位置,可以再減去滾動條滾動了多少。以上是判斷元素是否在可視窗口底部。
以上這篇完美解決手機(jī)網(wǎng)頁中輸入框被輸入法遮擋的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【一】框架總覽及菜單模塊的處理
這篇文章主要介紹了基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【一】框架總覽及菜單模塊的處理的相關(guān)資料,小編認(rèn)為非常具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05echarts學(xué)習(xí)之如何給餅圖中間添加文字
這篇文章主要介紹了echarts學(xué)習(xí)之如何給餅圖中間添加文字問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03js表數(shù)據(jù)排序 sort table data
對于表格的排序,是很不錯的一個功能,方便用戶快速的分析一些數(shù)據(jù)。2009-02-02利用JS判斷字符串是否含有數(shù)字與特殊字符的方法小結(jié)
在我們?nèi)粘9ぷ鞯臅r候,利用javaScript判斷一個字符串中是否包括有數(shù)字和"-",在一些表單提交的地方,這是比較有用的常規(guī)判斷,這里收集有幾種不同的方法,最后還將簡要介紹下isNAN函數(shù)的使用方法和例子,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-11-11