Имам няколко <input type="number"> елемента на моята уеб страница. Използвам jQTouch и се опитвам да остана на цял екран през цялото време; т.е. хоризонталното превъртане е лошо. Всеки път, когато щракна върху елемент <input>, страницата се превърта надясно, показвайки черна рамка вдясно на екрана и децентрирайки всичко. Входовете са изместени от лявата част на екрана и започват някъде към средата на страницата.
Как мога да предотвратя това превъртане на фокус?
Току-що намерих решението на този проблем в тази публикация Спиране на превъртането на страницата от фокус
Просто добавете onFocus="window.scrollTo(0, 0);" към полето за въвеждане и сте готови! (Опитах го с <textarea> и <input type="text" /> на iPad, но съм почти сигурен, че ще работи и на iPhone.)
Страхувах се, че превъртането ще се вижда като трептене или нещо подобно, но за щастие не е така!
event.preventDefault() в комбинация с вашето решение изглежда, че определено ще работи, но все още получавам поведението на превъртане по подразбиране.
- person Benny; 17.03.2015
ето как реших това на iPhone (мобилен Safari) (използвах jQuery)
1) създайте глобална променлива, която държи текущата позиция на превъртане и която се актуализира всеки път, когато потребителят превърта прозореца за изглед
var currentScrollPosition = 0;
$(document).scroll(function(){
currentScrollPosition = $(this).scrollTop();
});
2) свържете фокусното събитие към въпросното поле за въвеждане. когато е фокусиран, накарайте документа да превърти до текущата позиция
$(".input_selector").focus(function(){
$(document).scrollTop(currentScrollPosition);
});
Та Да! Без досадно „превъртане на фокус“
Едно нещо, което трябва да имате предвид... уверете се, че полето за въвеждане е НАД клавиатурата, в противен случай ще скриете полето. Това може лесно да бъде смекчено чрез добавяне на if-клауза.
Бих препоръчал да използвате метода 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');
});
Ако фокусът се задава програмно, ето какво бих направил:
Запазете стойността на scollTop на прозореца, преди да промените фокуса. След това възстановете scrollTop до запазената стойност веднага след задаване на фокуса.
Ако използвате jQuery:
var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it
Опитайте това, мисля, че проблемът е в мащабирането:
<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
