在iphone safari虚拟键盘上键入时滚动到所选元素 [英] Scrolling to selected element while typing on iphone safari virtual keyboard

问题描述

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

I am building an iphone webapp and have a page with an input field. I'd like the field to scroll up to just above the virtual keyboard when it shows up. I've tried putting a scrollTo(x,y) on the input focus event (i.e. just before the keyboard shows up), but when I start typing the page scrolls up again (presumably based on the default mobile safari behavior). I also tried setting keypress event handlers, but preventing propagation of those events just disabled the keyboard, although it did prevent scrolling.

有没有办法强制页面成为当虚拟键盘出现时，在特定位置（键盘上方的输入字段只），当我恢复键入时，它没有移动？

Is there any way to force the page to be at a particular position (with the input field just above the keyboard) when the virtual keyboard shows up, and not have it move when i resume typing?

推荐答案

好的，所以这可能是你见过的最糟糕的黑客，但它什么都不打算。

Ok, so this is probably the worst hack you will ever see, but it beats nothing.

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

What you could do is change the position of the text box dynamically (using javascript) to fixed, position:fixed, this will change the position of the textbox to be relative to the browser window instead of the page. This should render the Iphone's scrolling irrelevant and your text box should be at the top of the page no matter what. Then onBlur, the css position is set to relative again (which should put it back in its place).

为了使这个更漂亮你可以在文本框后面放一个div onFocus所以它隐藏了实际的网站内容，你可以使用top和left css属性将文本框居中（只需确保清除那些onBlur）。

To make this prettier you could put a div behind the textbox onFocus so it hides the actual site content, and you could center the textbox using the top and left css properties (just make sure to clear those too onBlur).

这篇关于在iphone safari虚拟键盘上键入时滚动到所选元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！