Zapobieganie przewijaniu strony podczas przełączania ostrości

Question

Jestem nowy w mobilnym internecie/dev. Moja aplikacja używa jquery-mobile, phonegap i Compass (scss).

mam problem na mojej stronie logowania:

logo i pola są zawarte w standardowym 'div' pojemniki (data-role = "content" data-type = "vertical"). Tło jest kolorowe.

po przełączeniu fokusu z pola logowania na hasło, strona przesuwa się w górę, czego nie chcę. Chciałbym, aby moje logo i pola pozostały na miejscu, tak jak strona logowania do aplikacji Skype iOS.

oto co się dzieje:

Próbowałem kilka sztuczek, próbując zablokować przewijanie lub zmuszając stronę, aby przewinąć do 0,0, bez powodzenia.

Myślę teraz o nowej strategii, może używając górnego względnego pozycjonowania dla logo i pól oraz przechwytywania wydarzeń z fokusem, aby przewinąć stronę samodzielnie, na klawiaturze przesuń w górę (przez animowanie górnych względnych współrzędnych pozycjonowania).

Choć wydaje się to wykonalne, zastanawiam się, czy jest to rodzaj pracy całego zespołu używane przez Skype iOS App ...

jakąś radę na technikach stosowanych w tym konkretnym przypadku jest mile widziany!

okrzyki,

Fred

Answer 1

Nie testowałem tego jeszcze, ale nie e.preventDefault() zatrzymać ten problem? Zwykle używasz e.preventDefault(), aby zatrzymać domyślne zachowanie przewijania/przeciągania.

$(document).bind('focus', function(e){ 
    e.preventDefault(); 
}); 

lub lepiej

$(element).bind('focus', function(e){ 
    e.preventDefault(); 
}); 

lub

$(document).bind('touchstart', function(e){ 
    e.preventDefault(); 
}); 

Czy utwór pole wejściowe lepiej?

$(":input").live({ 
    focus: function(e) { 
    e.preventDefault(); 
    } 
}); 

Answer 2

I w końcu nie udało się znaleźć żadnego rozwiązania kodowania do obsługi mój problem, ale zauważyłem, że chirurgicznych pozycjonowanie pozwoliło mi fryz ekranu podczas przełączania między polami.

Miejsce dostępne dla całego ekranu logowania nie może przekraczać miejsca dostępnego po wyświetleniu klawiatury, czyli 200 pikseli. Co więcej, aby zapobiec przewijaniu podczas przełączania pola, ostatnie środkowe położenie pola wejściowego nie może przekraczać 100 pikseli. Za pomocą CSS można grać na paddingu i marginesie, aby osiągnąć pożądany rezultat.

Powinno być możliwe, aby uzyskać dodatkową przestrzeń pionową usuwając „Bar pola nawigacyjnego” klawiaturą, ale nie wiem jak to zrobić, nie:/