溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹JS如何解決移動web開發手機輸入框彈出的問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
在移動web開發中和pc端不同的是，手機的輸入是軟鍵盤，這樣就會有個問題，那就是當有輸入的時候，鍵盤彈起來，整個頁面難免會發生變化
1、頁面提高背景會出現不夠用的現象，
解決方法，在body中設置背景圖，即便是頁面抬升了，背景也依舊存在，
2、底部用fix布局
這個問題會使得頁面提升而底部的fix也跟著提升，遮蓋住相應的頁面，這個有兩種解決方法
一、是頁面頁相應的提高，頁面變化多少我們讓上面的頁面滾動多少，
$('input').bind('click',function(e){
var $this = $(this);
e.preventDefault();
setTimeout(function(){
$(window).scrollTop($this.offset().top - 10);
},200)
})$this.offset().top 是input 元素的高度，將window滾動到要輸入的input的位置
二、把fix元素隱藏掉當頁面輸入完成再展示出來
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屬性，當手機輸入框彈出時，頁面屏幕會變形，resize就會執行，我們先獲取原來的高度，當發生變化時我們獲取現在的頁面高度，當頁面高度不一樣的時候就隱藏元素，
以上是“JS如何解決移動web開發手機輸入框彈出的問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
