解決vue-cli單頁面手機應(yīng)用input點擊手機端虛擬鍵盤彈出蓋住input問題
在用vue-cli腳手架搭建手機H5頁面應(yīng)用的時候，其中一頁中部有input，底部有position：absolute；bottom：0的元素，
當點擊input框時在安卓手機上出現(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;
// 安卓手機鍵盤吊起擋住輸入框
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單頁面手機應(yīng)用input點擊手機端虛擬鍵盤彈出蓋住input問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue設(shè)置別名聯(lián)想路徑即@/生效的方法
這篇文章主要給大家介紹了Vue設(shè)置別名聯(lián)想路徑即@/生效的方法,文中有詳細的代碼示例和圖文講解,具有一定的參考價值,需要的朋友可以參考下2023-11-11
關(guān)于elementUI select控件綁定多個值(對象)
這篇文章主要介紹了關(guān)于elementUI select控件綁定多個值(對象)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
xss的攻擊方式是發(fā)生在用戶使用瀏覽器時候運行,通過嵌入腳本竊取用戶信息,本文主要介紹了vue如何防范XSS攻擊的一些方法,感興趣的可以了解一下2024-04-04
在遇到chunk-vendors.js文件的語法錯誤時,可以嘗試在vue.config.js文件中添加transpileDependencies參數(shù)進行配置,這通過明確指示哪些依賴需要被babel轉(zhuǎn)譯,從而幫助解決編譯過程中的語法問題,此方法適用于Vue項目中遇到的相關(guān)錯誤,希望能幫助到遇到同樣問題的開發(fā)者2024-10-10
vue2移動端使用vue-qrcode-reader實現(xiàn)掃一掃功能的步驟
最近在使用vue開發(fā)的h5移動端想要實現(xiàn)一個調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于vue2移動端使用vue-qrcode-reader實現(xiàn)掃一掃功能的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue組件基礎(chǔ)操作，組件是vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進行直接的引用2023-01-01
詳解如何解決Vue和vue-template-compiler版本之間的問題
這篇文章主要介紹了詳解如何解決Vue和vue-template-compiler版本之間的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題
今天小編就為大家分享一篇解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了vue-router 學(xué)習(xí)快速入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
vue3中echarts的tooltip組件不顯示問題及解決
這篇文章主要介紹了vue3中echarts的tooltip組件不顯示問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10