1、問題由來
做h5 已經有很長一段時間了，現在做的工作h5比pc上的更多，曾經解決pc端IE各個版本的相容性也是傷透腦筋，原以為h5的會更好，殊不知，還有更頭疼的問題，當設計師要設計一個聊天視窗，把輸入框定位在最底部，這是再常見不過的問題了吧，舉例：
html5實作輸入框fixed定位在螢幕最底部相容性-1.png (28.19 KB, 下載下傳次數: 0)
2020-10-4 19:41 上傳
上圖就是我最近做的一個功能，原以為是很簡單的一個定位功能，但是沒想到牛逼的測試居然用各種iphone，各種安卓，各種浏覽器(qq浏覽器、safari、opera等浏覽器)，各種輸入法(系統自帶、搜狗輸入法)，測出來一大堆問題，最後經過千辛萬苦，終于做到了能大緻相容。
2、初步解決
1)、結構布局于第一次解決
html5實作輸入框fixed定位在螢幕最底部相容性-2.png (29.1 KB, 下載下傳次數: 0)
2020-10-4 19:41 上傳
//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;
}複制代碼
會話問診
$('.body').css('height', $(window).height() - 39);
$('#input').on('focus', function () {
setTimeout(function () {
window.scrollTo(0, 1000000);
}, 200);
});複制代碼這種布局方法就讓中間".body"中的内容在".body"中滾動，對整個html中的body産生了1px的滾動，此處滾動的目的是為了執行"window.scrollTo(0, 1000000);",經過測試，若body沒有産生滾動，則這個方法是不會執行的。
相信很多人都會以 以上的方法解決input在彈出鍵盤時候的問題，當鍵盤彈出來後，就讓滾動條一直往下面滾直到滾動到最下面，沒錯，這種措施之後能保證大部分的正常，但是在safari浏覽器中就出現了問題，由于safari浏覽器下部有一塊
html5實作輸入框fixed定位在螢幕最底部相容性-3.png (69.6 KB, 下載下傳次數: 0)
2020-10-4 19:41 上傳
圖中是safari浏覽器自帶的一塊标簽，當使用以上滾動時，你會發現，他雖然是滾動上去了，但是也會出現一塊空白，沒錯，相當于給你的感覺是滾動上去過多，那麼此時，也會被測試打回，是不是感覺很傷心無助，(safari浏覽器把下面那塊當作了body的東西，他自己實作了一塊，把我們的html内容裝在了他自己實作的容器裡面)
2)、進一步解決
經過大量的比較與測試，我發現了一個問題，safari下面的自帶輸入法根本不用處理，鍵盤依然可以正常彈出與收起。(ps：safari浏覽器沒有特别的判斷，是以此處判斷過于複雜，如有更好的判斷，請留言，謝謝！此處之是以判斷safari浏覽器并不是判斷QQ浏覽器，是因為測試了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)、再次優化與解決
經過以上幾步驟，原以為完美無缺的解決方案，可以達到很好的相容了，可是意外又發生了，測試們用了搜狗輸入法來做測試，問題又來了，蘋果手機自帶的輸入法的實作是把body擠上去，搜狗則是在得到focus之後，直接彈出的一塊遮罩層，這就導緻了問題，此時我們的輸入框被擋在了輸入法之後，是以又增加了下面的判斷與處理，
$('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、解決
經過幾次測試，看似幾乎沒問題，最後又在iphone5上面的QQ浏覽器中用搜狗輸入法又測試出了問題，它在第一次點選當input擷取到第一次focus事件的時候，window執行了scrollTo方法，第二次，他不再執行，不難發現，系統是以為已經滾動到了下方，是以便不再執行，那麼我又增加了一個事件
$('input').on('blur', function () {
window.scrollTo(0, 0);
});複制代碼終于大功告成，基本上解決了現在普遍浏覽器中大部分搜狗和自帶輸入法對模拟fix的input定位問題。
總結最後解決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産生滾動，不然以上方法依然無法解決。
最近同僚又測出了我的方案對某些手機的不相容性，是以他給出了另一個解決方案，經測試已經達到了幾乎所有手機的相容，下面提供給大家：
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得到目前的值，必須延遲 否則拿到的就是1000000
setTimeout(function(){
window.scrollTo(0, window.scrollY - 45);//45像素 所有浏覽器都是這麼高
}, 50)
} else {//其他浏覽器
window.scrollTo(0, 1000000);
// window.scrollTo(0, ++this.scrollNum);
}
}, 200);
},複制代碼這是我解決這個問題的過程與實踐，
到此這篇關于html5實作輸入框fixed定位在螢幕最底部相容性的文章就介紹到這了,更多相關html5輸入框fixed定位相容性内容請搜尋咔叽論壇以前的文章或繼續浏覽下面的相關文章，希望大家以後多多支援咔叽論壇！