背景：在寫提交訂單頁面時候，底部按鈕當我點擊輸入留言信息的時候，
底部提交訂單按鈕被輸入法軟鍵盤頂上去遮擋住了。

h5 ios輸入框與鍵盤 兼容性優化

實現原理：當頁面高度發生變化的時候改變底部button的樣式，沒點擊前button在底部固定
position: fixed;當我點擊input的時候樣式變成position: static!important;

一開始的解決方案是通過input的聚焦和失焦，但是有個問題，當我點擊input的時候聚焦，
再點擊鍵盤上的隱藏按鈕時就沒辦法恢復原來的fixed。

原來的樣式主要是position: fixed;當輸入法點擊出現時候修改為 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綁定動態class，‘nav-hide’ ，通過hideClass來顯示動態顯示，
初始值設置hideClass: false,
另外設置初始屏幕高度 docmHeight,變化屏幕高度 showHeight 。

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

watch 監聽showHeight，當頁面高度發生變化時候，觸發inputType方法,
window.onresize 事件在 vue mounted 的時候 去掛載一下它的方法,
以便頁面高度發生變化時候更新showHeight

data(){retrun{// 默認屏幕高度docmHeight: document.documentElement.clientHeight,  //一開始的屏幕高度showHeight: document.documentElement.clientHeight,   //一開始的屏幕高度hideClass: false,}
},watch:{showHeight: 'inputType'  
}
methods: {// 檢測屏幕高度變化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監聽頁面高度的變化window.onresize = () => {return (() => {window.screenHeight = document.body.clientHeight;this.showHeight = window.screenHeight;})()}}

方法二

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

<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;
}

如果大家有更好的方法希望能夠交流學習

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

轉載于:https://www.cnblogs.com/lalalagq/p/9919432.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。