移動端 鍵盤彈出問題
阿新 • • 發佈:2020-12-17
vue 手機鍵盤把底部按鈕頂上去
vue.jsjavascript 釋出於 2018-04-08背景:在寫提交訂單頁面時候,底部按鈕當我點選輸入留言資訊的時候,
底部提交訂單按鈕被輸入法軟鍵盤頂上去遮擋住了。
實現原理:當頁面高度發生變化的時候改變底部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 = true
let that = this
setTimeout(() => {
if (that.docmHeight > that.showHeight) {
//顯示class
this.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;
}
如果大家有更好的方法希望能夠交流學習
微信6.7.4 IOS12 手機鍵盤收縮後白屏問題
加directive
Vue.directive('resetPage', {
inserted: function(el) {
// 監聽鍵盤收起事件
document.body.addEventListener('focusout', () => {
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
// 軟鍵盤收起的事件處理
setTimeout(() => {
const scrollHeight =
document.documentElement.scrollTop || document.body.scrollTop || 0
window.scrollTo(0, Math.max(scrollHeight - 1, 0))
}, 100)
}
})
}
})
input新增v-reset-page
<inputv-reset-page class="remark-input"type="text">