溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在用vue-cli腳手架搭建手機H5頁面應用的時候，其中一頁中部有input，底部有position：absolute；bottom：0的元素，
當點擊input框時在安卓手機上出現了：
1 虛擬鍵盤彈出蓋住input
2 底部定位的元素被擠上來
網絡上很多關于body設定寬高以及scrolltop的方法都不管用，因為這里是路由頁面，根據網上的思路，吊起輸入鍵盤的時候頁面的高度是變化的，監聽window.onresize，判斷是否吊起鍵盤，然后設定底部模塊的隱藏和顯示，整個塊元素的margintop就可以實現了。
代碼如下
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問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
