javascript - 在 iPhone Safari 虚拟键盘上打字时滚动到所选元素

Question

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

当虚拟键盘出现时，有什么方法可以强制页面位于特定位置(输入字段刚好在键盘上方)，并且当我恢复输入时它不移动？

Answer 1

好吧，这可能是您见过的最糟糕的黑客攻击，但它无可匹敌。

你可以做的是动态地改变文本框的位置(使用 javascript)，position:fixed，这会改变文本框相对于浏览器窗口的位置页面的。这应该使 Iphone 的滚动无关紧要，无论如何，您的文本框都应该位于页面的顶部。然后 onBlur，css 位置再次设置为相对位置(应该将其放回原位)。

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