JS解決移動web開發(fā)手機輸入框彈出的問題
更新時間：2017年03月31日 08:47:22 作者：zhy421202048
在移動web開發(fā)中和pc端不同的是，手機的輸入是軟鍵盤，這樣就會有個問題，那就是當有輸入的時候，鍵盤彈起來，整個頁面難免會發(fā)生變化。怎么解決這個問題呢？下面腳本之家小編給大家分享JS解決移動web開發(fā)手機輸入框彈出的問題
在移動web開發(fā)中和pc端不同的是，手機的輸入是軟鍵盤，這樣就會有個問題，那就是當有輸入的時候，鍵盤彈起來，整個頁面難免會發(fā)生變化
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就會執(zhí)行，我們先獲取原來的高度，當發(fā)生變化時我們獲取現在的頁面高度，當頁面高度不一樣的時候就隱藏元素，
以上所述是小編給大家介紹的JS解決移動web開發(fā)手機輸入框彈出的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了JS實現的頁面自定義滾動條效果,涉及JavaScript結合css設置頁面滾動條樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JS實現常見的查找、排序、去重算法,結合實例形式總結分析了JavaScript線性查找、二分查找、遞歸查找、數組去重、冒泡拍戲、快速排序實現技巧,需要的朋友可以參考下2018-05-05
uni-app使用uploadFile上傳多張圖片的具體實現
在微信小程序中不支持多張圖片上傳,需要做循環(huán)實現多張圖片上傳,下面這篇文章主要給大家介紹了關于uni-app使用uploadFile上傳多張圖片的具體實現,需要的朋友可以參考下2023-04-04
大型網站往往很矛盾，想用戶在首頁看到更多東西，又不想浪費太多服務器流量。比如一個有3屏的首頁?？赡?0%的用戶進首頁的目的是點擊首頁的連接，到子頁面。2010-05-05
所謂貪婪匹配就是匹配重復字符是盡可能多的匹配，非貪婪匹配就是盡可能少的匹配，下面通過一個例子給大家分享JavaScript正則表達式的貪婪匹配和非貪婪匹配，感興趣的朋友參考下吧2017-09-09
JavaScript使用遞歸和循環(huán)實現階乘的實例代碼
這篇文章主要介紹了JavaScript使用遞歸和循環(huán)實現階乘的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-08
文本框input聚焦失焦樣式實現代碼，需要的朋友可以參考下2012-10-10
這篇文章主要為大家詳細介紹了基于ssm框架實現layui分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
JavaScript的for循環(huán)中嵌套一個點擊事件的問題解決
本文主要介紹了JavaScript的for循環(huán)中嵌套一個點擊事件點擊一次彈出多個相同的值的解決方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
spirngmvc js傳遞復雜json參數到controller的實例
下面小編就為大家分享一篇spirngmvc js傳遞復雜json參數到controller的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03