App下載

html5中輸入框fixed定位在屏幕最底部兼容性實(shí)現(xiàn)方法分享!

耳機(jī)依賴患者 2021-08-16 11:28:12 瀏覽數(shù) (2865)
反饋

今天小編來和大家分享有關(guān)于:“html5中輸入框fixed定位在屏幕最底部兼容性實(shí)現(xiàn)方法分享!”這個方法的相關(guān)內(nèi)容和解決方法思路!希望對小伙伴們有所幫助!

1、問題由來

做h5 已經(jīng)有很長一段時間了,現(xiàn)在做的工作h5比pc上的更多,曾經(jīng)解決pc端IE各個版本的兼容性也是傷透腦筋,原以為h5的會更好,殊不知,還有更頭疼的問題,當(dāng)設(shè)計(jì)師要設(shè)計(jì)一個聊天窗口,把輸入框定位在最底部,這是再常見不過的問題了吧,舉例:

上圖就是我最近做的一個功能,原以為是很簡單的一個定位功能,但是沒想到牛逼的測試居然用各種iphone,各種安卓,各種瀏覽器(qq瀏覽器、safari、opera等瀏覽器),各種輸入法(系統(tǒng)自帶、搜狗輸入法),測出來一大堆問題,最后經(jīng)過千辛萬苦,終于做到了能大致兼容。

2、初步解決

1)、結(jié)構(gòu)布局于第一次解決

//1部分css
.header {
    width: 100%;
    height: 40px;
}
//2部分
.body {
   width: 100%;
   overflow: auto;
}
//3部分
.footer {
    width: 100%;
    height: 30px;position: fixed; bottom:0;left:0;right:0;
}
<div class="header" id="header">會話問診</div>
 <div class="body" id="body"></div>
 <div class="footer" id="footer">
      <input type="text" id="input">
 </div>
$('.body').css('height', $(window).height() - 39);
$('#input').on('focus', function () {
   setTimeout(function () {
                 window.scrollTo(0, 1000000);
    }, 200);
 });

這種布局方法就讓中間".body"中的內(nèi)容在".body"中滾動,對整個html中的body產(chǎn)生了1px的滾動,此處滾動的目的是為了執(zhí)行"window.scrollTo(0, 1000000);",經(jīng)過測試,若body沒有產(chǎn)生滾動,則這個方法是不會執(zhí)行的。 

相信很多人都會以 以上的方法解決input在彈出鍵盤時候的問題,當(dāng)鍵盤彈出來后,就讓滾動條一直往下面滾直到滾動到最下面,沒錯,這種措施之后能保證大部分的正常,但是在safari瀏覽器中就出現(xiàn)了問題,由于safari瀏覽器下部有一塊

圖中是safari瀏覽器自帶的一塊標(biāo)簽,當(dāng)使用以上滾動時,你會發(fā)現(xiàn),他雖然是滾動上去了,但是也會出現(xiàn)一塊空白,沒錯,相當(dāng)于給你的感覺是滾動上去過多,那么此時,也會被測試打回,是不是感覺很傷心無助,(safari瀏覽器把下面那塊當(dāng)作了body的東西,他自己實(shí)現(xiàn)了一塊,把我們的html內(nèi)容裝在了他自己實(shí)現(xiàn)的容器里面)

2)、進(jìn)一步解決

經(jīng)過大量的比較與測試,我發(fā)現(xiàn)了一個問題,safari下面的自帶輸入法根本不用處理,鍵盤依然可以正常彈出與收起。(ps:safari瀏覽器沒有特別的判斷,因此此處判斷過于復(fù)雜,如有更好的判斷,請留言,謝謝!此處之所以判斷safari瀏覽器并不是判斷QQ瀏覽器,是因?yàn)闇y試了opera瀏覽器的展示等跟QQ瀏覽器一樣,因此此處就判斷safari瀏覽器):

 $('input').on('focus', function () {  var agent = navigator.userAgent.toLowerCase();
    setTimeout(function () {
                  if (agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1
                      && agent.indexOf('coast') == -1 && agent.indexOf('android') == -1
                      && agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1) 
                         {
			 //safari瀏覽器
                          } else {//其他瀏覽器
                               window.scrollTo(0, 1000000);
                  }
             }, 200);
 });

3)、再次優(yōu)化與解決

經(jīng)過以上幾步驟,原以為完美無缺的解決方案,可以達(dá)到很好的兼容了,可是意外又發(fā)生了,測試們用了搜狗輸入法來做測試,問題又來了,蘋果手機(jī)自帶的輸入法的實(shí)現(xiàn)是把body擠上去,搜狗則是在得到focus之后,直接彈出的一塊遮罩層,這就導(dǎo)致了問題,此時我們的輸入框被擋在了輸入法之后,因此又增加了下面的判斷與處理,

$('input').on('focus', function () {
setTimeout(function () {
                if (agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1
                    && agent.indexOf('coast') == -1 && agent.indexOf('android') == -1
                    && agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1) {//safari瀏覽器
                    if(scope.$txtWrap.offset().top-winobj.scrollTop() > document.body.offsetHeight/2) { //說明軟鍵盤遮蓋頁面
                        window.scrollTo(0, winobj.height() - 270);
                    }
                } else {//其他瀏覽器
                    window.scrollTo(0, 1000000);
                }
            }, 200);
});

3、解決

經(jīng)過幾次測試,看似幾乎沒問題,最后又在iphone5上面的QQ瀏覽器中用搜狗輸入法又測試出了問題,它在第一次點(diǎn)擊當(dāng)input獲取到第一次focus事件的時候,window執(zhí)行了scrollTo方法,第二次,他不再執(zhí)行,不難發(fā)現(xiàn),系統(tǒng)是以為已經(jīng)滾動到了下方,因此便不再執(zhí)行,那么我又增加了一個事件:

$('input').on('blur', function () {
  window.scrollTo(0, 0);
});

終于大功告成,基本上解決了現(xiàn)在普遍瀏覽器中大部分搜狗和自帶輸入法對模擬fix的input定位問題。

總結(jié)最后解決js為:

$('input').on('focus', function () {
    var agent = navigator.userAgent.toLowerCase();
  setTimeout(function () {
                if (agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1
                    && agent.indexOf('coast') == -1 && agent.indexOf('android') == -1
                    && agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1) {//safari瀏覽器
                    if(scope.$txtWrap.offset().top-winobj.scrollTop() > document.body.offsetHeight/2) { //說明軟鍵盤遮蓋頁面
                        window.scrollTo(0, winobj.height() - 270);
                    }
                } else {//其他瀏覽器
                    window.scrollTo(0, 1000000);
                }
            }, 200);
});

$('input').on('blur', function () {
    var agent = navigator.userAgent.toLowerCase();
     setTimeout(function () {
                if (!(agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1
                    && agent.indexOf('coast') == -1 && agent.indexOf('android') == -1
                    && agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1)) {//非safari瀏覽器
                        window.scrollTo(0, 0);
                }
            }, 0);
});

重中之重,一定要讓body產(chǎn)生滾動,不然以上方法依然無法解決。

最近同事又測出了我的方案對某些手機(jī)的不兼容性,所以他給出了另一個解決方案,經(jīng)測試已經(jīng)達(dá)到了幾乎所有手機(jī)的兼容,下面提供給大家:

inputFocus: function (e) {
            var winobj = $(window),
                scope = this,
                agent = navigator.userAgent.toLowerCase();
            setTimeout(function () {
                if (agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1
                    && agent.indexOf('coast') == -1 && agent.indexOf('android') == -1
                    && agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1) {//safra瀏覽器
                    window.scrollTo(0, 1000000);//先滾動到最底部,再用scrollY得到當(dāng)前的值,必須延遲 否則拿到的就是1000000
                    setTimeout(function(){
                        window.scrollTo(0, window.scrollY - 45);//45像素 所有瀏覽器都是這么高
                    }, 50)
                } else {//其他瀏覽器
                    window.scrollTo(0, 1000000);
                    // window.scrollTo(0, ++this.scrollNum);
                }
            }, 200);
        },

這是我解決這個問題的過程與實(shí)踐,

那么到此這篇關(guān)于:“html5中輸入框fixed定位在屏幕最底部兼容性實(shí)現(xiàn)方法分享!”這方面的內(nèi)容和解決方法就分享到這里了!更多的html5功能和效果我們都可以在 W3Cschool進(jìn)行學(xué)習(xí)和了解!


0 人點(diǎn)贊