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

Question

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

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

Answer 1

Я только что нашел решение этой проблемы в этом посте Stop page scrolling from focus

Просто добавьте 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); 
}); 

Ta Da! Нет раздражающего «прокрутки по фокусу»

Следует иметь в виду, что поле ввода ВЫШЕ клавиатуру, иначе вы спрячете поле. Это можно легко смягчить, добавив if-clause.

Answer 3

Я бы рекомендовал использовать метод jQuery.animate() linked to above, а не только 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

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

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

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

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

Answer 5

Попробуйте это, я думаю, что проблема является увеличение:

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