這篇文章主要介紹JS如何解決移動(dòng)web開(kāi)發(fā)手機(jī)輸入框彈出的問(wèn)題，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家專(zhuān)注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作與策劃設(shè)計(jì),禪城網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:禪城等地區(qū)。禪城做網(wǎng)站價(jià)格咨詢(xún):13518219792

在移動(dòng)web開(kāi)發(fā)中和pc端不同的是，手機(jī)的輸入是軟鍵盤(pán)，這樣就會(huì)有個(gè)問(wèn)題，那就是當(dāng)有輸入的時(shí)候，鍵盤(pán)彈起來(lái)，整個(gè)頁(yè)面難免會(huì)發(fā)生變化

1、頁(yè)面提高背景會(huì)出現(xiàn)不夠用的現(xiàn)象，

解決方法，在body中設(shè)置背景圖，即便是頁(yè)面抬升了，背景也依舊存在，

2、底部用fix布局

 這個(gè)問(wèn)題會(huì)使得頁(yè)面提升而底部的fix也跟著提升，遮蓋住相應(yīng)的頁(yè)面，這個(gè)有兩種解決方法

一、是頁(yè)面頁(yè)相應(yīng)的提高，頁(yè)面變化多少我們讓上面的頁(yè)面滾動(dòng)多少，

$('input').bind('click',function(e){
  var $this = $(this);
  e.preventDefault();
  setTimeout(function(){
    $(window).scrollTop($this.offset().top - 10);
  },200)
})

$this.offset().top 是input 元素的高度，將window滾動(dòng)到要輸入的input的位置

二、把fix元素隱藏掉當(dāng)頁(yè)面輸入完成再展示出來(lái)

var original = document.documentElement.clientHeight;
window.addEventListener("resize", function() {
var resizeHeight = document.documentElement.clientHeight;
if(resizeHeight != original) {
$('.bottom-button').css('display', 'none');
} else {
$('.bottom-button').css('display', 'block');
}
});

利用resize屬性，當(dāng)手機(jī)輸入框彈出時(shí)，頁(yè)面屏幕會(huì)變形，resize就會(huì)執(zhí)行，我們先獲取原來(lái)的高度，當(dāng)發(fā)生變化時(shí)我們獲取現(xiàn)在的頁(yè)面高度，當(dāng)頁(yè)面高度不一樣的時(shí)候就隱藏元素，

以上是“JS如何解決移動(dòng)web開(kāi)發(fā)手機(jī)輸入框彈出的問(wèn)題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！