欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ā)手機輸入框彈出的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論