app開發點擊頁面上的輸入框吊起鍵盤后固定在底部的內容被頂在鍵盤上面


我們在開發的時候一般都有頂部固定個按鈕的設計,按鈕的樣式我們一般都會使用position:fixed;bottom:0的定位

這樣當頁面上有輸入框的時候,我們在點擊輸入框獲取焦點吊起軟鍵盤后固定在底部的元素就會被頂起,

之所以會出現這種情況,是因為軟鍵盤彈出會導致Webview的高度發生變化,進而導致html中元素位置發生變化。
其實也可以認為元素定位沒有變,只是元素所在容器的寬高變化,看起來像是元素的位置變了。

軟鍵盤被喚起的時候,原本屬於Webview的空間被軟鍵盤占用了(是占用,不是覆蓋或者遮蓋)。屏幕一共就那么高,軟鍵盤把Webview的空間占用了一部分,那么Webview自然就被擠壓,高度也就變了。

解決辦法

var footer= document.querySelector('.footer');
// 可見區域高度減去元素的高度
footer.style.top = document.documentElement.clientHeight - 40 + 'px';

完成


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM