快捷導(dǎo)航

Android中底部菜單被輸入法頂上去的解決方案

更新時(shí)間：2017年01月18日 15:46:35 作者：個(gè)人bug集中地

我們一般的解決方法是獲取焦點(diǎn)，底部隱藏，失去焦點(diǎn)，底部菜單出現(xiàn)，但是，有些人會(huì)點(diǎn)擊這個(gè)按鈕收起鍵牌。這篇文章主要介紹了Android中底部菜單被輸入法頂上去的解決方案，需要的朋友參考下吧

安卓手機(jī)輸入法彈出,消失會(huì)觸發(fā)

window.onresize事件，我們一般的解決方法是獲取焦點(diǎn)，底部隱藏，失去焦點(diǎn)，底部菜單出現(xiàn)，但是，有些人會(huì)點(diǎn)擊這個(gè)按鈕收起鍵牌

那么，這個(gè)時(shí)候你的失去焦點(diǎn)無效，還有一種方法呢，是把position:fixed;改成position:absoult;這樣底部菜單就不會(huì)頂上去，但是這種方法，經(jīng)過我的實(shí)驗(yàn)，還是會(huì)被輸入法頂上去，這兩種方法都不要完全解決問題，還有一種是布局的問題，主頁面:position:relative,底部菜單:position：absoult;這個(gè)方法在一定的時(shí)間段內(nèi)有用，這幾種方法在做逛周邊的時(shí)候我都用過，結(jié)果全被測(cè)試打回，這個(gè)bug只能解決,畢竟有些處女座是無法忍受這種問題,寫了那么多的廢話，下面貼出解決辦法:兼容安卓和蘋果:

安卓手機(jī)。針對(duì)這個(gè)輸入法隱藏事件

安卓手機(jī)有這個(gè)事件,iphone沒有,iphone點(diǎn)擊這個(gè)按鈕會(huì)讓input框失去焦點(diǎn)

window.onresize = function () {
 var h = $(window).height();
 //console.log(h+','+window.screen.availHeight)
 var u = navigator.userAgent;
 if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
 if(h <= window.screen.availHeight/2){
  $('#toNav').css({'position':'absoult',"margin-top":"-.5rem",'display':'none'});
 }else{
  $('#toNav').css({'position':'fixed','display':'block'});
 }
 }
}
$('input').on('focus',function(){
 $('#toNav').hide();
})
$('input').on('blur',function(){
 $('#toNav').show();
})

注:有代碼潔癖的人可看下面的，前面代碼，已解決底部菜單被輸入法頂上去的問題

另外input框是去焦點(diǎn)，底部菜單出現(xiàn)時(shí)，會(huì)出現(xiàn)底部菜單被彈上去，然后再彈下來,這個(gè)一般有些人都不會(huì)忍，所有我們失去焦點(diǎn)需要改變一下底部的樣式，在安卓上和iphone上有時(shí)候底部的樣式有可能會(huì)不同，這個(gè)時(shí)候我們需要判斷手機(jī)類型去修改樣式。

以上所述是小編給大家介紹的Android中底部菜單被輸入法頂上去的解決方案，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: