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

【问题标题】：Scrolling to selected element while typing on iphone safari virtual keyboard在 iphone safari 虚拟键盘上键入时滚动到所选元素
【发布时间】：2011-02-26 10:14:53
【问题描述】：

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

当虚拟键盘出现时，有什么方法可以强制页面位于特定位置（输入字段就在键盘上方），而当我继续输入时它不会移动?

【问题讨论】：

我不认为有解决这个问题的方法，它也类似于 iphone 上 textareas 内部的问题 - 虽然文本区域更糟糕，因为它会改变你的缩放比例您完成了对内容的编辑（如果您禁用缩放功能，这真的很糟糕，因为您希望它的行为类似于网络应用程序，因为如果不关闭应用程序就无法返回首选缩放设置。）。
@我不确定我是否同意上面的评论。如果您正在创建一个 Web 应用程序，您必须考虑来自不同 Web 浏览器（包括移动浏览器）的不同行为 - 但总的来说，我在移动 safari 上描述的表单没有遇到问题。 @spinlock 您是否专门为移动浏览器设计了一个 web 应用程序？你用的是什么SDK？ Dashcode 还是其他？您是否允许滚动容器 DIV？您的页面是否刚好适合屏幕但不滚动？其中一些答案可能会帮助我们解决您的问题。
嘿@spinlock 您是否设法在打字时将输入固定在一个地方？提前致谢
请在stackoverflow.com/a/37639158/3151014查看我对同一问题的回答。

标签： javascript iphone web-applications mobile-safari

【解决方案1】：

据我所知，您遇到的问题是，当键盘启动时，浏览器正试图将窗口移动到元素本身的视图中。

可能发生的情况是在键盘弹出之前正在记录滚动条的位置。然后，一旦键盘弹出，浏览器就会根据记录的值计算窗口需要移动的距离以使元素进入视图。到那时你已经改变了窗口的位置。所以它相对于你设置的位置移动窗口，而不是它认为的位置。

如果您不尝试手动将元素滚动到视图中（无脚本），您会遇到什么行为？

我的印象是 iPhone 浏览器本身可以满足您的需求。如果不是，它可能与元素定位有关。 IE。浏览器无法正确计算元素的位置，例如如果它在一个固定位置的容器中（因为一旦浏览器尝试 scollTo 它，它的位置就会移动）。

如果失败，可以尝试将 scrollTo 函数设置为超时，以便在键盘启动后触发。

【讨论】：

【解决方案2】：

这可能工作，尝试使用 css translate3d 而不是 scrollTo(x,y)

见http://www.webkit.org/blog/386/3d-transforms/

【讨论】：

【解决方案3】：

好的，所以这可能是你见过的最糟糕的 hack，但它没有什么比这更好的了。

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

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

【讨论】：