在用vue-cli腳手架搭建手機H5頁面應用的時候，其中一頁中部有input，底部有position：absolute；bottom：0的元素，

創(chuàng)新互聯(lián)是一家專業(yè)提供調兵山企業(yè)網站建設,專注與成都做網站、網站設計、H5網站設計、小程序制作等業(yè)務。10年已為調兵山眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網站建設公司優(yōu)惠進行中。

當點擊input框時在安卓手機上出現(xiàn)了：

1 虛擬鍵盤彈出蓋住input

2 底部定位的元素被擠上來

網絡上很多關于body設定寬高以及scrolltop的方法都不管用，因為這里是路由頁面，根據網上的思路，吊起輸入鍵盤的時候頁面的高度是變化的，監(jiān)聽window.onresize，判斷是否吊起鍵盤，然后設定底部模塊的隱藏和顯示，整個塊元素的margintop就可以實現(xiàn)了。

代碼如下

 mounted () {
 this.clientHeight = document.documentElement.clientHeight;
 const that = this;
 // 安卓手機鍵盤吊起擋住輸入框

 window.onresize = function() {

  if(document.documentElement.clientHeight < that.clientHeight) {
  // scrollVal為負值
  let scrollVal = document.documentElement.clientHeight-that.clientHeight;
  $(".alert-main").css("marginTop",scrollVal);
  $(".bottom-create").hide();
  }else {
  $(".alert-main").css("marginTop",0);
  $(".bottom-create").show();
  }
  
 };
 },

今天這個bug 遇到了新問題，同樣的華為手機上，當從別的路由吊起輸入鍵盤的時候回到當前路由，

document.documentElement.clientHeight 就變成了減去輸入鍵盤高度的值，

這時需要在頁面第一次加載將document.documentElement.clientHeight記錄到store中，store中的值不會因為頁面重新渲染而改變。

以上這篇解決vue-cli單頁面手機應用input點擊手機端虛擬鍵盤彈出蓋住input問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。