js 移動(dòng)端關(guān)于頁(yè)面布局髓削,如果底部有position:fixed的盒子,又有input,當(dāng)軟鍵盤(pán)彈出收起都會(huì)影響頁(yè)面布局奖蔓。這時(shí)候Android可以監(jiān)聽(tīng)resize事件赞草,代碼如下,而ios沒(méi)有相關(guān)事件吆鹤。
// 解決安卓鍵盤(pán)彈出問(wèn)題
var oHeight = $(document).height();
$(window).resize(function () {
if ($(document).height() < oHeight) {
$(".xxx").css("position", "static");
//當(dāng)軟鍵盤(pán)彈出厨疙,在這里面操作
} else {
$(".xxx").css("position", "fixed");
//當(dāng)軟鍵盤(pán)收起,在此處操作
}
});
//解決iOS第三方軟鍵盤(pán)喚起時(shí)底部input輸入框被遮擋問(wèn)題
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isiOS) {
var bfscrolltop = document.body.scrollTop;//獲取軟鍵盤(pán)喚起前瀏覽器滾動(dòng)部分的高度
$(".xxx").focus(function () {
interval = setInterval(function () {//設(shè)置一個(gè)計(jì)時(shí)器疑务,時(shí)間設(shè)置與軟鍵盤(pán)彈出所需時(shí)間相近
document.body.scrollTop = document.body.scrollHeight;//獲取焦點(diǎn)后將瀏覽器內(nèi)所有內(nèi)容高度賦給瀏覽器滾動(dòng)部分高度
}, 100)
}).blur(function () {//設(shè)定輸入框失去焦點(diǎn)時(shí)的事件
clearInterval(interval);//清除計(jì)時(shí)器
document.body.scrollTop = bfscrolltop; //將軟鍵盤(pán)喚起前的瀏覽器滾動(dòng)部分高度重新賦給改變后的高度
});
}