在iphone safari虚拟键盘上键入时滚动到所选元素

Question

我正在构建一个iphone webapp并且有一个带有输入字段的页面.我希望该字段在显示时向上滚动到虚拟键盘上方.我已经尝试在输入焦点事件上放置一个scrollTo(x,y)(即在键盘出现之前),但是当我开始键入页面时再次向上滚动(可能是基于默认的移动safari行为).我也尝试过设置按键事件处理程序,但是阻止这些事件的传播只是禁用了键盘,尽管它确实阻止了滚动.

有没有什么办法来强制页面是在一个特定的位置(与输入字段只是在键盘上方),当虚拟键盘显示出来,当我恢复打字不会将其移动？

Answer 1

好吧，这可能是你见过的最糟糕的黑客攻击，但它没有什么比这更好的了。

您可以做的是将文本框的位置动态（使用 javascript）更改为固定，position:fixed这会将文本框的位置更改为相对于浏览器窗口而不是页面。这应该会使 Iphone 的滚动变得无关紧要，并且无论如何，您的文本框都应该位于页面顶部。然后在 onBlur 上，CSS 位置再次设置为相对（这应该将其放回原位）。

为了使这个更漂亮，您可以在文本框 onFocus 后面放置一个 div，以便它隐藏实际的网站内容，并且您可以使用顶部和左侧的 css 属性将文本框居中（只需确保也清除这些 onBlur）。