固定元素（HTML）在Android鍵盤消失後破壞？

我想在視口/屏幕的底部放置文本輸入。它工作正常，它甚至在onfocus事件後「粘」到鍵盤的頂部。固定元素（HTML）在Android鍵盤消失後破壞？

但是，當鍵盤關閉時，改變的位置（鍵盤頂部）和原始位置（視口底部）之間存在滯後。

我的元素的CSS是：

.fixed { 
    position: absolute; 
    z-index: 1000; 
    height: 50px; 
    display: block; 
    bottom: 0px; 
    width: 100%; 
}

編輯：

此行爲不會只依賴於固定/絕對定位。另外輸入位置：相對或位置：靜態具有相同的問題。看起來軟鍵盤消失的速度比屏幕/瀏覽器視圖可以自行更新的速度快得多。看起來像內存問題或Android默認瀏覽器中的深層錯誤（現在殺了我）。

下面是一些截圖。

焦點：

http://i.cubeupload.com/AQS7h8.png

在模糊（注意藍屏±是一個MEM問題？）：

http://i.cubeupload.com/nV3kMh.png

來源

2014-06-21 Francis

不要使用「position：absolute」。這樣，鍵盤隨時出現在您的元素下。否則，沒有辦法沒有動態編輯您的視圖端口高度，而看到鍵盤......但這不會工作，因爲Android設備不同的設備高度。順便說一句。本機Android視圖將以相同的方式工作。 – lin

感謝您的回答@lin。我正在使用位置：絕對和鍵盤仍然出現在我的元素下。當我使用相對或靜態時，鍵盤會在元素之上，這是不希望的。它是否與android：windowSoftInputMode =「adjustPan」設置有關？ – Francis

所以如果我正確地理解了你的話，鍵盤就會模糊（這需要一些時間），而且只有在鍵盤完全消失之後，你的元素纔會回到底部？也許作爲一種解決方法，您可以在onblur事件觸發時立即隱藏您的輸入字段，並在文檔調整大小後（或幾毫秒後）再次顯示它。 –

曾與Android鍵盤搞壞佈局類似情況，下面的代碼應該適合你。

我們從頂部獲取當前位置，設置頂部樣式值並重置底部值。

var fixed = document.querySelector(".fixed"), 
    distanceFromTop = fixed.getBoundingClientRect().top; 
fixed.style.top = distanceFromTop + 'px'; 
fixed.style.bottom = 'auto';

來源

2016-10-10 13:17:34

固定元素（HTML）在Android鍵盤消失後破壞？

回答

相關問題