背景：在寫(xiě)提交訂單頁(yè)面時(shí)候，底部按鈕當(dāng)我點(diǎn)擊輸入留言信息的時(shí)候，
底部提交訂單按鈕被輸入法軟鍵盤(pán)頂上去遮擋住了。

h5 ios輸入框與鍵盤(pán) 兼容性優(yōu)化

實(shí)現(xiàn)原理：當(dāng)頁(yè)面高度發(fā)生變化的時(shí)候改變底部button的樣式，沒(méi)點(diǎn)擊前button在底部固定
position: fixed;當(dāng)我點(diǎn)擊input的時(shí)候樣式變成position: static!important;

一開(kāi)始的解決方案是通過(guò)input的聚焦和失焦，但是有個(gè)問(wèn)題，當(dāng)我點(diǎn)擊input的時(shí)候聚焦，
再點(diǎn)擊鍵盤(pán)上的隱藏按鈕時(shí)就沒(méi)辦法恢復(fù)原來(lái)的fixed。

原來(lái)的樣式主要是position: fixed;當(dāng)輸入法點(diǎn)擊出現(xiàn)時(shí)候修改為 position: static!important;

.payOnline {position: fixed;bottom: 0;left: 0;right: 0;width: 100%;background: #fff;font-size: 17px;    }.nav-hide {position: static!important;}

vue綁定動(dòng)態(tài)class，‘nav-hide’ ，通過(guò)hideClass來(lái)顯示動(dòng)態(tài)顯示，
初始值設(shè)置hideClass: false,
另外設(shè)置初始屏幕高度 docmHeight,變化屏幕高度 showHeight 。

//其他代碼<div class="payOnline" v-bind:class="{  'nav-hide': hideClass }"><span>合計(jì)：¥{{totalFee}}</span><div class="payBtn" @click="submitOrder">提交訂單</div></div>
//其他代碼

watch 監(jiān)聽(tīng)showHeight，當(dāng)頁(yè)面高度發(fā)生變化時(shí)候，觸發(fā)inputType方法,
window.onresize 事件在 vue mounted 的時(shí)候 去掛載一下它的方法,
以便頁(yè)面高度發(fā)生變化時(shí)候更新showHeight

data(){retrun{// 默認(rèn)屏幕高度docmHeight: document.documentElement.clientHeight,  //一開(kāi)始的屏幕高度showHeight: document.documentElement.clientHeight,   //一開(kāi)始的屏幕高度hideClass: false,}
},watch:{showHeight: 'inputType'  
}
methods: {// 檢測(cè)屏幕高度變化inputType() {if (!this.timer) {this.timer = truelet that = thissetTimeout(() => {if (that.docmHeight > that.showHeight) {//顯示classthis.hideClass = true;} else if (that.docmHeight <= that.showHeight) {//顯示隱藏this.hideClass = false;}that.timer = false;}, 20)}},
},mounted() {// window.onresize監(jiān)聽(tīng)頁(yè)面高度的變化window.onresize = () => {return (() => {window.screenHeight = document.body.clientHeight;this.showHeight = window.screenHeight;})()}}

方法二

另外還有一種解決方案就是不要將按鈕固定到底部，簡(jiǎn)單粗暴適合對(duì)ui要求不高的前端頁(yè)面，例如原來(lái)我的保存地址按鈕是固定在底部的，出現(xiàn)上面的問(wèn)題后我把樣式修改了一下，取消fixed定位，加了margin，也解決了這個(gè)問(wèn)題;

<div data-v-46aeadee="" class="save-address">保存并使用</div>.address-from  {bottom: .2rem;width: 70%;text-align: center;padding: 10px 0;background: #f23030;font-size: 16px;color: #fff;margin: 1.5rem;border-radius: 2px;
}

如果大家有更好的方法希望能夠交流學(xué)習(xí)

原文地址：https://segmentfault.com/a/1190000014228563

轉(zhuǎn)載于:https://www.cnblogs.com/lalalagq/p/9919432.html

總結(jié)

以上是生活随笔為你收集整理的vue 手机键盘把底部按钮顶上去的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。