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