Страница прокрутки в фокусе ввода текста для мобильных устройств?

Im делает мобильный оптимизированный сайт с текстовым вводом, который фильтрует список по мере ввода. Это похоже на это: http://jquerymobile.com/test/docs/lists/lists-search.html

Для телефонов это будет удобство использования, если, когда вы выбрали вход, страница прокручивалась вниз, чтобы вход находился в верхней части страницы. Таким образом, как видно из приведенного ниже списка, вы будете видны по мере ввода. Возможно ли это и/или у кого есть опыт? Спасибо

Ответы

Ответ 1

Согласовано - это было бы хорошо для удобства использования.

Если вы используете jQuery, это должно сделать трюк:

$('#id-of-text-input').on('focus', function() {
    document.body.scrollTop = $(this).offset().top;
});

Ответ 2

Лучшим решением будет:

$('#id-of-text-input').on('focus', function() { document.body.scrollTop += this.getBoundingClientRect().top - 10 });

Потому что offsetTop (или .offset().top при использовании JQuery) возвращает расстояние от первого позиционированного родителя, где вам нужно расстояние от вершины document.

getBoundingClientRect().top возвращает расстояние между текущей позицией видового экрана на элемент, т.е. если вы прокручиваете 300px под элементом, он вернет -300. Поэтому добавление расстояния с помощью += будет прокручиваться до элемента. -10 не является обязательным - чтобы разрешить некоторое пространство в верхней части.

Ответ 3

$('input, textarea').focus(function () {
    $('html, body').animate({ scrollTop: ($('input, textarea').offset().top - 10) }, 1);
    return false;
});