固定元素（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键盘消失后破坏？

回答

相关问题