解決vue-cli單頁面手機應用input點擊手機端虛擬鍵盤彈出蓋住input問題
更新時間：2018年08月25日 10:07:10 作者：happyElina
今天小編就為大家分享一篇解決vue-cli單頁面手機應用input點擊手機端虛擬鍵盤彈出蓋住input問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在用vue-cli腳手架搭建手機H5頁面應用的時候，其中一頁中部有input，底部有position：absolute；bottom：0的元素，
當點擊input框時在安卓手機上出現(xiàn)了：
1 虛擬鍵盤彈出蓋住input
2 底部定位的元素被擠上來
網(wǎng)絡上很多關于body設定寬高以及scrolltop的方法都不管用，因為這里是路由頁面，根據(jù)網(wǎng)上的思路，吊起輸入鍵盤的時候頁面的高度是變化的，監(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問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了詳解Vue.js和layui日期控件沖突問題解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了vue directive定義全局和局部指令及指令簡寫,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue-cli 使用axios的操作方法及整合axios的多種方法
這篇文章主要介紹了vue-cli 使用axios的操作方法及整合axios的多種方法,vue-cli整合axios的多種方法，小編一一給大家列出來了，大家根據(jù)自身需要選擇，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue3+ElementPlus 表單組件的封裝實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue里的data要用return返回的原因淺析,需要的朋友可以參考下2019-05-05
axios 實現(xiàn)post請求時把對象obj數(shù)據(jù)轉(zhuǎn)為formdata
今天小編就為大家分享一篇axios 實現(xiàn)post請求時把對象obj數(shù)據(jù)轉(zhuǎn)為formdata，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
近接觸到了一個 Vue3 的打印需求,我發(fā)現(xiàn)自己雖然從事前端開發(fā)已有多年,但對如何實現(xiàn)自定義打印還沒有深入研究,一般都是找現(xiàn)成的庫來解決問題,借這次的機會研究了一下如何實現(xiàn)自定義打印,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue如何提升首屏加載速度實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
ant design vue datepicker日期選擇器中文化操作
這篇文章主要介紹了ant design vue datepicker日期選擇器中文化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue自定義指令詳解,需要的朋友可以參考下2022-12-12