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

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

1 虛擬鍵盤彈出蓋住input

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

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

代碼如下

 mounted () { this.clientHeight = document.documentElement.clientHeight; const that = this; // 安卓手機(jī)鍵盤吊起擋住輸入框 window.onresize = function() {  if(document.documentElement.clientHeight < that.clientHeight) {  // scrollVal為負(fù)值  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 遇到了新問題，同樣的華為手機(jī)上，當(dāng)從別的路由吊起輸入鍵盤的時候回到當(dāng)前路由，

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

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

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