解決vue-cli單頁面手機(jī)應(yīng)用input點(diǎn)擊手機(jī)端虛擬鍵盤彈出蓋住input問題
在用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問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue.js和layui日期控件沖突問題解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue directive定義全局和局部指令及指令簡(jiǎn)寫
這篇文章主要介紹了vue directive定義全局和局部指令及指令簡(jiǎn)寫,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue-cli 使用axios的操作方法及整合axios的多種方法
這篇文章主要介紹了vue-cli 使用axios的操作方法及整合axios的多種方法,vue-cli整合axios的多種方法，小編一一給大家列出來了，大家根據(jù)自身需要選擇，需要的朋友可以參考下2018-09-09
Vue3+ElementPlus 表單組件的封裝實(shí)例
這篇文章主要介紹了Vue3+ElementPlus 表單組件的封裝實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue里的data要用return返回的原因淺析,需要的朋友可以參考下2019-05-05
axios 實(shí)現(xiàn)post請(qǐng)求時(shí)把對(duì)象obj數(shù)據(jù)轉(zhuǎn)為formdata
今天小編就為大家分享一篇axios 實(shí)現(xiàn)post請(qǐng)求時(shí)把對(duì)象obj數(shù)據(jù)轉(zhuǎn)為formdata，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
近接觸到了一個(gè) Vue3 的打印需求,我發(fā)現(xiàn)自己雖然從事前端開發(fā)已有多年,但對(duì)如何實(shí)現(xiàn)自定義打印還沒有深入研究,一般都是找現(xiàn)成的庫來解決問題,借這次的機(jī)會(huì)研究了一下如何實(shí)現(xiàn)自定義打印,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue如何提升首屏加載速度實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
ant design vue datepicker日期選擇器中文化操作
這篇文章主要介紹了ant design vue datepicker日期選擇器中文化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue自定義指令詳解,需要的朋友可以參考下2022-12-12