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

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

---

当虚拟键盘出现时，有没有办法强制页面处于特定位置（输入字段就在键盘上方），而在我继续键入时不让页面移动

好吧，这可能是你见过的最糟糕的黑客行为，但它什么也比不上

您可以做的是动态地（使用javascript）将文本框的位置更改为固定，

position:fixed

，这将更改文本框相对于浏览器窗口而不是页面的位置。这将使Iphone的滚动变得无关紧要，无论发生什么情况，您的文本框都应该位于页面顶部。然后onBlur，css位置再次设置为relative（这将使它回到原来的位置）

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

这可能会起作用，尝试使用css translate3d而不是scrollTo（x，y）

---

请参见

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

可能发生的情况是，滚动条的位置在键盘弹出之前被记录下来。一旦键盘弹出，浏览器将根据记录的值计算窗口需要移动的距离，以便将图元带入视图。此时您已经更改了窗口的位置。所以它是相对于你设定的位置移动窗口，而不是它认为它所在的位置

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

我的印象是iPhone浏览器天生就可以满足你的需求。如果不是，它可能与元素定位有关。也就是说，浏览器无法正确计算元素的位置，例如，如果元素位于固定位置容器中（因为一旦浏览器尝试锁定它，它的位置就会移动）

---

如果失败，可以尝试将scrollTo功能置于超时状态，以便在键盘启动后启动。

我认为没有解决此问题的方法，这类似于iphone上文本区域的问题——尽管文本区域更糟糕，因为它会在你编辑完内容后改变你的缩放比例（如果你禁用缩放功能，因为你想让它表现得像一个web应用程序，因为不关闭应用程序就无法返回到首选的缩放设置，那么这真的很糟糕。）@我不确定我是否同意上面的评论。如果你正在创建一个Web应用程序，你必须考虑不同的Web浏览器（包括移动浏览器）的不同行为。但是一般来说，我在移动Safari上所描述的方式中并没有遇到表单的问题。@ SpLink你是专门为移动浏览器设计一个WebApp的吗？不是吗？您使用的是什么SDK？Dashcode还是其他？您是否允许滚动您的容器DIV？您的页面是否刚好适合屏幕但不滚动？这些答案中的一些可能有助于我们解决您的问题。嘿@spinlock您是否在键入时将输入固定在一个位置？提前感谢请查看我对同一问题的回答在