H5登入頁 鍵盤擋住輸入框的另類解決方案

2021-08-14 14:04:27 字數 668 閱讀 4517

登入頁有時候為了做的漂亮底部會有些或者其他樣式,在大屏或者其他解析度較高的手機端正常的情況下,會碰到手機解析度低或其他小屏安卓機鍵盤擋住輸入框的情況。常規解決方案有js獲取高度做判斷啊,input獲取焦點後改變樣式類啊什麼的。最近筆者發現了乙個偏方,對介面要求不那麼高的情況下可以試試:

登入頁容器原css參考如下:

position:fixed;

width:100%;

height:100%

left: 0;

right: 0;

top: 0;

bottom: 0;

裡面有一絕對定位在底部,css參考如下:

width: 100%;

height: 120px;

bottom:10px;

left:0;

position: absolute;

因為鍵盤向上彈出會壓縮頁面的高度,導致原頁面底部絕對定位的跑上去,擋住輸入框。

如下圖 正常頁面:

獲取焦點頁面後

H5輸入框擋住解決

需求 h5介面底部有個輸入框,當鍵盤彈出的時候會把輸入框擋住。先說結論 設定manifest中包含該webview的activity的屬性 android windowsoftinputmode adjustresize 解決基礎 基本原理還是使用系統的規則。通過manifest中activity的...

當鍵盤擋住輸入框的時候讓輸入框往上移動

用的是通知 當鍵盤出現時 nsnotificationcenter defaultcenter addobserver self selector selector keyboardwillshow name uikeyboardwillshownotification object nil 當鍵盤...

iOS 鍵盤擋住輸入框的解決方案

原理 利用通知來實現對鍵盤狀態的監聽 直接上 1.註冊通知 鍵盤即將彈出 uikeyboardwillshownotification 鍵盤已經彈出 uikeyboarddidshownotification 鍵盤即將隱藏 uikeyboardwillhidenotification 鍵盤已經隱藏 ...