Прокрутка к выбранному элементу при вводе на виртуальную клавиатуру iphone safari

Я создаю iphone webapp и имею страницу с полем ввода. Я бы хотел, чтобы поле прокручивалось вверх до виртуальной клавиатуры, когда оно появилось. Я попытался поместить scrollTo (x, y) на входное фокусное событие (то есть непосредственно перед тем, как появится клавиатура), но когда я начну печатать, страница снова прокручивается (предположительно, исходя из поведения мобильного сафари по умолчанию). Я также попытался установить обработчики событий нажатия клавиш, но предотвращение распространения этих событий просто отключил клавиатуру, хотя это предотвратило прокрутку.

Есть ли способ заставить страницу находиться в определенной позиции (с полем ввода чуть выше клавиатуры), когда появляется виртуальная клавиатура, и не двигать ее, когда я возобновляю ввод?

ОТВЕТЫ

Ответ 1

Хорошо, так что это, наверное, худший взлом, который вы когда-либо увидите, но ничего не бьет.

Что вы можете сделать, это изменить положение текстового поля динамически (используя javascript) до фиксированного, position:fixed, это изменит положение текстового поля относительно окна браузера, а не страницы. Это должно привести к тому, что прокрутка Iphone не имеет значения, и ваше текстовое поле должно быть в верхней части страницы независимо от того, что. Затем onBlur позиция css снова устанавливается на относительную (которая должна вернуть ее на место).

Чтобы сделать это красивее, вы можете поместить div за текстовое поле onFocus, чтобы он скрывал фактический контент сайта, и вы могли бы центрировать текстовое поле, используя верхние и левые свойства css (просто убедитесь, что они тоже очищены onBlur).

Ответ 2

Насколько я знаю, проблема заключается в том, что при запуске клавиатуры браузер пытается переместить окно в поле зрения самого элемента.

Что может случиться, так это то, что позиция полосы прокрутки записывается до появления клавиатуры. Затем браузер вычисляет расстояние, которое нужно переместить в окно, чтобы принести элемент в поле зрения, как только клавиатура выскочила, на основе записанного значения. После этого вы изменили положение окна. Таким образом, он перемещает окно относительно позиции, которую вы устанавливаете, в отличие от позиции, в которой она думает.

Какое поведение вы испытываете, если не пытаетесь прокрутить элемент в представлении вручную (без создания сценариев)?

Мне кажется, что браузер iPhone изначально делает то, что вы хотите. Если нет, это может иметь какое-то отношение к позиционированию элементов. И.Е. Браузер не может правильно рассчитать положение элемента, например. Если он находится в контейнере с фиксированной позицией (потому что он будет перемещаться, как только браузер попытается выполнить scollTo).

Если это не удается, попробуйте поместить функцию scrollTo в тайм-аут, чтобы она срабатывала после появления клавиатуры.