隐藏在Android Chrome键盘后面的输入文本框 [英] input textbox hidden behind keyboard on android Chrome

问题描述

我有一个以下格式的移动网页:

I have a mobile web page of the following format:

header - logo etc - 绝对定位

header - logo etc - absolute positioned

content - 可滚动，绝对定位

content - scrollable, absolute positioned

页脚，40px绝对定位

footer, 40px absolute positioned

内容区域有多个输入框.在 Android 上的 Chrome 上，点击页面底部的输入框会导致输入当软键盘弹出时不在视野中.这一页确实滚动以尝试向上移动框，但实际上还不够可见.它最终隐藏在页脚后面.

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 上.iOS 上的 SafariWindows Phone 和其他移动浏览器上的 IE 运行良好.

Any idea how to fix this? This occurs only on Chrome-Android. Safari on iOS and IE on Windows Phone and other mobile browsers work just fine.

推荐答案

我希望有一个仅 CSS 的解决方案，但我认为没有.Gaunt Face 的回答是一个很好的方法.不幸的是，就我而言，这需要进行一些更改，并且可能会破坏自动化(因为 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.

我有一个用于任何输入/文本区域字段的点击处理程序.在那个点击处理程序中，我将表单容器 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.

这会产生一个意想不到的后果 - 滚动位置丢失.我通过获取输入字段的偏移量并使用该偏移量在父 div 上调用 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 Chrome键盘后面的输入文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！