移動端軟鍵盤彈起遮擋輸入框問題的解決方案

1.背景

原生app與H5頁面混合開發(fā)時，input輸入框喚起軟鍵盤時，輸入框被遮擋，分為兩種情況：

客戶端設(shè)置了windowSoftInputMode ="adjustResize"屬性，軟鍵盤會將webview向上抬起，偶現(xiàn)input框被遮擋

客戶端未設(shè)置windowSoftInputMode ="adjustResize"屬性，軟鍵盤在webview上方，不會將webview抬起，一直遮擋input的輸入框

針對情況1的解決方案

當webview可以被抬起時，是可以監(jiān)聽到resize事件的，resize事件觸發(fā)，判斷input框是否在可視區(qū)內(nèi)，在可視區(qū)內(nèi)不做變動，否則計算距離后上移

監(jiān)聽resize事件

let originHeight = document.documentElement.clientHeight || document.body.clientHeight; window.addEventListener('resize', () => { // resize事件監(jiān)聽，webview高度是否發(fā)生變化//加了0.3s延時，等到鍵盤完全彈起時在判斷是否被遮擋setTimeout(() =>{this.solveCoverWays();}, 300)let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;if (originHeight < resizeHeight) {if(this.scrollTopHeightVal != 0) {// 觸發(fā)滑動，鍵盤下移時，頁面回滾document.documentElement.scrollTop = -this.scrollTopHeightValthis.scrollTopHeightVal = 0}}originHeight = resizeHeight; }, false)

是否被遮擋判斷

solveCoverWays() {// 獲取input元素底部bottom及整體高度let inputHeight = document.getElementById("inputHeight");let inputInfo = window.getComputedStyle(inputHeight, null);let inputInfoH = parseInt(inputInfo.height.replace('px',''))// 獲取文檔當前聚焦的元素const { activeElement } = document;if (!['INPUT', 'TEXTAREA'].includes(activeElement.tagName.toUpperCase())) return;const rect = activeElement.getBoundingClientRect();if (!rect) return;// 設(shè)置初始滑動高度 ，聚焦元素到頂部的距離減去可視區(qū)的高度，如果大于0，就說明被遮擋住了，此時需要滾動到可視區(qū)內(nèi)let scrollHeight = 0scrollHeight = rect.bottom - (document.documentElement.clientHeight || document.body.clientHeight);// 判斷當前focus的input底部是否在document.body可視區(qū)域內(nèi)if (scrollHeight > 0) {document.body.scrollTop = scrollHeight + inputInfoH;document.documentElement.scrollTop = scrollHeight + inputInfoH;this.scrollTopHeightVal = scrollHeight + inputInfoH;} },

注意：這里實現(xiàn)的前提是客戶端設(shè)置了相關(guān)屬性，可以監(jiān)聽到resize事件

針對情況2的解決方案

大致計算軟鍵盤的高度，在input的聚焦時，手動將整體加個padding，失焦時去掉padding，但是鍵盤抬起時，頁面滑動效果不好

總結(jié)

以上是生活随笔為你收集整理的移动端软键盘弹起遮挡输入框问题的解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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