JS解決移動web開發(fā)手機輸入框彈出的問題
更新時間：2017年03月31日 08:47:22 作者：zhy421202048
在移動web開發(fā)中和pc端不同的是，手機的輸入是軟鍵盤，這樣就會有個問題，那就是當有輸入的時候，鍵盤彈起來，整個頁面難免會發(fā)生變化。怎么解決這個問題呢？下面腳本之家小編給大家分享JS解決移動web開發(fā)手機輸入框彈出的問題
在移動web開發(fā)中和pc端不同的是，手機的輸入是軟鍵盤，這樣就會有個問題，那就是當有輸入的時候，鍵盤彈起來，整個頁面難免會發(fā)生變化
1、頁面提高背景會出現(xiàn)不夠用的現(xiàn)象，
解決方法，在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就會執(zhí)行，我們先獲取原來的高度，當發(fā)生變化時我們獲取現(xiàn)在的頁面高度，當頁面高度不一樣的時候就隱藏元素，
以上所述是小編給大家介紹的JS解決移動web開發(fā)手機輸入框彈出的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
在做項目的時候，經常遇到發(fā)短信驗證碼的問題，這時候需要用戶點完發(fā)送驗證碼按鈕后，一段時間內不能重復點擊，畢竟驗證碼都是收費的嘛，誰都不想浪費，那么如何實現(xiàn)這種功能呢？下面來分享一下。2014-06-06
如何用javascript控制上傳文件的大小...2006-10-10
layui之table checkbox初始化時選中對應選項的方法
今天小編就為大家分享一篇layui之table checkbox初始化時選中對應選項的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
微信小程序使用GoEasy實現(xiàn)websocket實時通訊
這篇文章主要介紹了微信小程序使用GoEasy實現(xiàn)websocket實時通訊的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
通過js實現(xiàn)分頁的代碼，一般情況下需要指定頁數(shù)，腳本之家以前也發(fā)布過一些，大家結合下即可。2010-09-09
JavaScript前端實現(xiàn)局部打印(精確打印)的幾種方式
前端可以打印差前端展示的任意頁面的任意內容,下面這篇文章主要給大家介紹了關于JavaScript前端實現(xiàn)局部打印(精確打印)的幾種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了JS塊級作用域和私有變量,結合實例形式較為詳細的分析了javascript塊級作用域和私有變量相關概念、原理、操作技巧,需要的朋友可以參考下2019-05-05
JavaScript從數(shù)組(數(shù)組對象)中刪除特定數(shù)據(jù)的方法
這篇文章主要給大家介紹了關于JavaScript從數(shù)組(數(shù)組對象)中刪除特定數(shù)據(jù)的相關資料,js在前臺界面中舉足輕重,在使用js刪除數(shù)組時遇到一些問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)Tab欄切換特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
現(xiàn)在的前端JavaScript可以說是異?；鸨?即使并不準備向前端發(fā)展,但是對前端的一些基礎知識還是必須有所了解的,先這篇文章主要給大家介紹了關于在HTML中嵌入JS代碼的3種方式,需要的朋友可以參考下2022-11-11