解決vue-cli單頁面手機(jī)應(yīng)用input點(diǎn)擊手機(jī)端虛擬鍵盤彈出蓋住input問題

發(fā)布時(shí)間：2020-08-31 05:19:25 來源：腳本之家閱讀：401 作者：happyElina 欄目：web開發(fā)

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

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

1 虛擬鍵盤彈出蓋住input

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

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

今天這個(gè)bug 遇到了新問題，同樣的華為手機(jī)上，當(dāng)從別的路由吊起輸入鍵盤的時(shí)候回到當(dāng)前路由，

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

這時(shí)需要在頁面第一次加載將document.documentElement.clientHeight記錄到store中，store中的值不會(huì)因?yàn)轫撁嬷匦落秩径淖儭?/p>

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

向AI問一下細(xì)節(jié)

解決vue-cli單頁面手機(jī)應(yīng)用input點(diǎn)擊手機(jī)端虛擬鍵盤彈出蓋住input問題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽