2013-10-08 13 views
8

Witajcie faceci, właśnie uaktualniłem z Cordova 3.0 do 3.1 i wciąż mam do czynienia z bardzo niepokojącym problemem (który wciąż istnieje podczas gry z preferencją KeyboardShrinksView).Klawiatura Cordova/Phonegap 3.1 (nieruchomo) skupia się na polach formularzy - iOS 7

Za każdym razem, gdy skupiam element (input/textarea), który uruchamia klawiaturę, element zostaje schowany za klawiaturą i muszę przewinąć w dół (używając przewijania z przepełnieniem do przewijania) aby zobaczyć element i jego zawartość.

Gdy parametr KlawiaturaShrinksView jest ustawiony na wartość true, strona nie będzie nawet przewijać, co jeszcze pogorszy.

Wszelkie rozwiązania w celu rozwiązania tego problemu? Widziałem kilka pytań i raportów o błędach, ale bez działających rozwiązań (lub rozwiązań).

Odtwarzanie z ustawieniem "pełnoekranowym" nie rozwiąże problemu.

Dzięki za pomoc

+1

Spójrz na [tę odpowiedź] (http://stackoverflow.com/a/18991076/503545). Naprawił to dla mnie. – tkh44

+0

Świetna odpowiedź! Dzięki za udostępnienie i działa automatycznie na klawiaturze, ale niestety mój stały nagłówek zostaje ukryty (nie jest już poprawiony i przewija się z widokiem). Jakieś rozwiązanie dla tej części? Pozdrawiam – Alex

Odpowiedz

3

końcu problem został rozwiązany przy pomocy następującej wtyczki: jQuery scrollTo plugin

Ilekroć jestem koncentrując się na elemencie jestem wyzwalania zdarzenie ostrości, który wykonuje następujące obliczenia i aktualizuje pozycję przewijania:

updateScroll: function(e){ 
    var el = $(e.currentTarget); 
    var offset = -$(".scrollerWrap").height() + $(el).height(); 
    $(".scrollerWrap").scrollTo(el,{offset: offset}); 
} 

Ubija dolną krawędź wejścia/tekstu na górze klawiatury. Działa jak urok, nawet jeśli rozwiązanie musi przejść przez ten kawałek JavaScript.

+0

Cóż, nie próbowałem tego osobiście, ale przeczytałem gdzieś, że scrollTo nie działa z safari w iOS7. –

+2

Działa idealnie dla mnie :) – Alex

+0

@Alex: Podaj więcej informacji na temat tego, jak tego użyć? –

2

Well, logicznie pogląd powinien poruszać się po otwarciu klawiatury. Stawiłem czoła podobnemu problemowi z iOS7 i aby go naprawić, zastosowałem kilka poprawek css.

Wprowadzono poprawki na opakowaniu klasy/id, które zawiera zawartość aplikacji.

position: relative; 
overflow: hidden; 
height: 460px; 
width: 320px; 

Uwaga - wysokość i szerokość ocenia się dynamicznie w zależności od wysokości i szerokości urządzenia

height = window.innerHeight 
width = window.innerWidth 

przez jQuery wysokość i szerokość selektory są dołączane do klasy opakowania/id.

+0

Dziękuję za pomoc. Sprawdziłem, czy moja wysokość jest w opakowaniu i zmienia się to, czy klawiatura jest wyświetlana, czy nie, ale zawartość nie jest "przewijana" do ustawionych pól wejściowych/tekstowych, a zatem trzeba przewijać się w celu jej wyświetlenia . Wciąż testuję inne rzeczy w javascript, dam ci znać o wyniku. – Alex

5

Po prostu miał bardzo podobny problem do tego. Niektóre z hacków znalezionych na tej stronie działały, ale miały nieprzyjemne efekty uboczne (takie jak bałagan przewijania lub układ CSS). W końcu pojawił się zupełnie nowy głupi hack.

rzutni meta tag:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" /> 

JavaScript uruchomić po obciążeniu:

document.body.style.height = screen.availHeight + 'px'; 

I to wszystko. Działa na iOS 7 i mam nie wiem dlaczego.

+0

To zadziałało idealnie dla mnie .. Miałem inne problemy z klawiaturą, które wymagały ustawienia 'height = device-height' w metrażu viewport powodującym wysokość ciała (100%) wziąć pod uwagę górny pasek.Połączyłem twój kod z kodem na: https://gist.github.com/shazron/6602131 i wszystko przebiegło płynnie po. –

+0

To jest geniusz.Nie mam pojęcia, dlaczego to działa, ale ja t naprawdę działa! Dzięki! – howard10

0

Działa dla mnie.

document.body.style.height = (screen.availHeight - 100) + 'px'; 
0

Myślę, że problem tutaj pochodzi z Framework7.

document.body.style.height = window.outerHeight + 'px'; 

Powyższy kod umieszczony w pliku index.js zadziałał jak urok.

Powiązane problemy