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