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