输入文本框背后隐藏的键盘上的Android浏览器 [英] input textbox hidden behind keyboard on android Chrome
问题描述
我有以下格式的移动网页：
I have a mobile web page of the following format:
标题 - 标志等等 - 绝对定位
header - logo etc - absolute positioned
内容 - 滚动，绝对定位
content - scrollable, absolute positioned
页脚，40PX绝对定位
footer, 40px absolute positioned
在内容区域有多个输入框。在Chrome浏览器在Android上， 窃听在页面底部的输入框使输入 不要在视图时，软键盘弹出。页面 并滚动尝试和移动框起来，但还不足以真正 是可见的。它结束了隐藏页脚后面。
The content area has multiple input boxes. On Chrome on Android, tapping on an input box at the bottom of the page causes the input to not be in view when the soft keyboard pops up. The page does scroll to try and move the box up, but not enough to actually be visible. It ends up hiding behind the footer.
不知道如何解决这一问题？发生这种情况仅在Chrome，Android系统。 Safari浏览器在iOS 和IE的WP和其他移动浏览器工作得很好。
Any idea how to fix this? This occurs only on Chrome-Android. Safari on iOS and IE on WP and other mobile browsers work just fine.
推荐答案
我希望有一个CSS唯一的解决办法，但我不认为有一个。憔悴的面容的回答是这样做的一个很好的方式。不幸的是在我的情况，这将需要一些改变，并有打破的自动化除其他事项外（因为URL已添加到它#targets）的可能性。
I was hoping for a CSS only solutions, but I don't think there is one. Gaunt Face's answer is a good way of doing it. Unfortunately in my case, this would require a few changes and has the possibility of breaking automation among other things (since the url has #targets added to it).
我通过改变位置类型2点击处理程序解决了这一点。
I solved this by changing the position type in 2 click handlers.
我有一个click处理任何输入/ textarea的领域。在此单击处理程序，我改变了形式容器div的位置，风格是静态的。请注意，这将页脚推到了底部，如果容器领域有一个滚动条。这一点，在我的情况不是一个问题，因为当键盘弹出，只有几个字段都是可见的。用户不能明显地看到任何差别。
I have a click handler for any input/textarea field. In that click handler, I change the position style of the form container div to be static. Note this will push the footer to the bottom if the container field has a scrollbar. This, in my case is not a problem as when the keyboard pops up, only a couple of fields are visible. The user cannot visibly see any difference.
我有第二个处理器，当用户点击了一个输入字段的 - 点击页面处理程序 - 在我恢复的位置类型为绝对值，使页面看起来就像是以前。
I have a second handler for when the user clicks out of an input field - page click handler - where I restore the the position type to absolute, making the page appear just as it was before.
这有一个意想不到的后果 - 滚动位置丢失。我通过获取输入字段的偏移，并呼吁scrollTop的父分区与偏移，从而恢复位置固定这一点。
This has one unintended consequence - The scroll position is lost. I fixed this by getting the offset of the input field and calling scrollTop on the parent div with that offset, thus restoring the position.
我已经看到了这个几个问题，但并没有找到答案。我希望这可以帮助别人。
I've seen a few questions about this, but did not find an answer. I hope this helps someone.
这篇关于输入文本框背后隐藏的键盘上的Android浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
