移動(dòng)H5項(xiàng)目中,會(huì)出現(xiàn)input框獲得焦點(diǎn)鍵盤彈出把頁面元素頂上去壓縮到一起,影響頁面布局.
方案一：監(jiān)聽頁面變化,動(dòng)態(tài)的展示和隱藏底部被頂上來的內(nèi)容
這種方法經(jīng)調(diào)試還不算十分完美
// 監(jiān)聽Android鍵盤彈起
const listenKeybordAndroid = () => {
console.log('監(jiān)聽鍵盤...')
const originHeight = document.documentElement.clientHeight || document.body.clientHeight
window.onresize = function () {
// 鍵盤彈起與隱藏都會(huì)引起窗口的高度發(fā)生變化
const resizeHeight = document.documentElement.clientHeight ||
document.body.clientHeight;
if (resizeHeight < originHeight) {
// 當(dāng)軟鍵盤彈起，在此處操作,控制被頂起的底部元素隱藏
buttonShow.value = false
} else {
// 當(dāng)軟鍵盤收起，在此處操作
buttonShow.value = true
}
}
}方案二：監(jiān)聽頁面變化，鍵盤彈起時(shí)將變化之前的高度賦值給壓縮后的頁面文章來源：http://www.zghlxwxcb.cn/news/detail-574715.html
? ? ? ? 這種方法相對(duì)與第一種能更完善解決問題,就是先獲取被影響的頁面正常顯示時(shí)的高度,在鍵盤被掉起時(shí)把這個(gè)正常的高度賦值給這個(gè)元素就行了,簡單地說就是給予被擠壓頁面一個(gè)正常的高度值,具體見下面代碼,其中 'content' 為我被影響的頁面Id.文章來源地址http://www.zghlxwxcb.cn/news/detail-574715.html
const clientHeight = ref(0)
clientHeight.value = document.getElementById('content').clientHeight
// 監(jiān)聽Android鍵盤彈起
const listenKeybordAndroid = () => {
console.log('監(jiān)聽鍵盤...')
const originHeight = document.documentElement.clientHeight || document.body.clientHeight
window.onresize = function () {
// 鍵盤彈起與隱藏都會(huì)引起窗口的高度發(fā)生變化
const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
if (resizeHeight < originHeight) {
// 當(dāng)軟鍵盤彈起，在此處操作
if (clientHeight.value) {
document.getElementById('content').style.height = clientHeight.value + 'px'
}
console.log('彈出...', document.getElementById('content').style.height, document.body.clientHeight)
} else {
// 當(dāng)軟鍵盤收起，在此處操作
document.getElementById('content').style.height = '100%'
console.log('收起...', document.getElementById('content').style.height, document.body.clientHeight)
}
}
}到了這里，關(guān)于Android原生鍵盤彈起,H5頁面被壓縮的兩種解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
