問題描述

在html5plus環境下，當html中存在固定在底部的元素時，此時彈出軟鍵盤的話，底部的元素也會被彈上來。

出現這種情況時，看起來頁面布局好像亂掉了，這樣給用戶的體驗不太理想。

問題分析

問題原因

之所以會出現這種情況，是因為軟鍵盤彈出會導致Webview的高度發生變化，進而導致html中元素位置發生變化。

其實也可以認為元素定位沒有變，只是元素所在容器的寬高變化，看起來像是元素的位置變了。意思就是，元素定位相關的css并沒有錯誤或者說失效。

驗證方法

想驗證這個變化，可以通過監聽window的resize事件在回調中打印日志即可。

// 監聽window的resize

window.addEventListener('resize', function() {

var height = document.documentElement.clientHeight;

var width = document.documentElement.clientWidth;

console.log('可見區域高度:' + height);

console.log('可見區域寬度:' + width);

});

當然，通過chrome調試Webview的功能，在chrome中可以很清楚地看到Webview的高度變化。

簡單來說

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

解決辦法

固定元素

元素之所以會上浮，是因為通常我們都是設置元素的bottom值使其固定在底部。

.bottom {

height: 40px;

position: fixed;

bottom: 0;

}

但是Webview被擠壓后，底部的位置上去了。元素是基于bottom值進行定位，那么它看起來就是在軟鍵盤的上面。

逆向固定

既然bottom值會使元素上浮，但是我們又希望元素固定在底部。此時，可以使用逆向的方式，也就是設置top值讓元素固定在頂部。

var bottomEl = document.querySelector('.bottom');

// 可見區域高度減去元素的高度

bottomEl.style.top = document.documentElement.clientHeight - 40 + 'px';

由于是基于top值定位，Webview被向上擠壓，頂部的位置是不變的，那么元素的位置自然就不會發生變化。

效果圖及源碼

改進后的效果如下

示例代碼見附件，下載后真機運行即可。

其它辦法

如果各位有其它更好的解決辦法，歡迎指教，并在社區分享你寶貴的經驗。

總結

以上是生活随笔為你收集整理的软键盘弹出时popwindow_【示例】解决软键盘弹出时底部元素上浮的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。