Предотвращение прокрутки экрана <input>на iPhone?

Question

У меня есть несколько <input type="number"> элементов на моей веб-странице. Я использую jQTouch, и я стараюсь всегда оставаться в полноэкранном режиме; горизонтальная прокрутка плохая. Всякий раз, когда я щелкаю элемент <input>, страница прокручивается вправо, показывая черную рамку в правой части экрана и децентрируя все. Входные данные смещены от левой части экрана и начинаются где-то ближе к середине страницы.

Как я могу предотвратить прокрутку в фокусе?

Answer 1

Я только что нашел решение этой проблемы в этом посте Остановить прокрутку страницы из фокуса

Просто добавьте onFocus="window.scrollTo(0, 0);" в поле ввода, и все готово! (Пробовал с <textarea> и <input type="text" /> на iPad, но я уверен, что он будет работать и на iPhone.)

Я боялся, что прокрутка будет видна как мерцание или что-то в этом роде, но, к счастью, это не так!

Answer 2

вот как я решил это на iPhone (мобильный Safari) (я использовал jQuery)

1) создать глобальную переменную, которая содержит текущую позицию прокрутки и которая обновляется каждый раз, когда пользователь прокручивает область просмотра

var currentScrollPosition = 0;
$(document).scroll(function(){
    currentScrollPosition = $(this).scrollTop();
});

2) привязать событие фокуса к соответствующему полю ввода. в фокусе переведите документ в текущую позицию

$(".input_selector").focus(function(){
    $(document).scrollTop(currentScrollPosition);
});

Та Да! Нет раздражающего "прокрутки в фокусе"

Следует помнить одну вещь: убедитесь, что поле ввода находится над клавиатурой, иначе вы скроете поле. Это может быть легко смягчено добавлением предложения if.

Answer 3

Я бы рекомендовал использовать метод jQuery.animate () , связанный с приведенным выше , а не только window.scrollTo (0,0), поскольку iOS анимирует свойства смещения страницы, когда фокусируется на элементе ввода.Вызов window.scrollTo () только один раз может не работать со временем этой нативной анимации.

Для получения дополнительной информации iOS анимирует свойства pageXOffset и pageYOffset window.Вы можете сделать условную проверку этих свойств, чтобы ответить, если окно сдвинуто:

if(window.pageXOffset != 0 || window.pageYOffset != 0) {
  // handle window offset here
}

Итак, если развернуть вышеупомянутую ссылку, это будет более полный пример:

$('input,select').bind('focus',function(e) { 
  $('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow'); 
});

Answer 4

Попробуйте, я думаю, проблема в зуме:

<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Answer 5

Если фокус устанавливается программно, я бы сделал следующее:

Сохраните значение scollTop окна перед изменением фокуса. Затем верните scrollTop к сохраненному значению сразу после установки фокуса.

При использовании jQuery:

var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it