Cordova/Phonegap 3.1 Tastatur (noch) überlagert fokussierte Formularfelder - iOS 7

Question

Hallo Leute, ich habe gerade von cordova 3.0 auf 3.1 aktualisiert und ich bin immer noch ein sehr beunruhigendes Problem (das immer noch beim KeyboardShrinksView Präferenz existiert).

Immer wenn ich ein Element (Eingabe/textarea) fokussiere, das die Tastaturöffnung auslöst, wird das Element hinter der Tastatur versteckt und ich muss scrollen (mit webkit-overflow-scrolling für das Scrollen übrigens) um das Element und seinen Inhalt zu sehen.

Wenn KeyboardShrinksView auf True gesetzt ist, wird die Seite nicht einmal scrollen, was es noch schlimmer macht.

Irgendwelche Lösungen, um dieses Problem zu beheben? Ich habe ein paar Fragen und Fehlermeldungen gesehen, aber keine funktionierenden Lösungen (oder Lösungen).

Spielen mit der "Vollbild" -Präferenz wird das Problem nicht lösen.

Danke für Ihre Hilfe

Answer 1

fixierte schließlich das Problem mit Hilfe der folgenden Plugin: jQuery scrollTo plugin

Immer, wenn ich auf einem Elemente bin konzentriert, ich bin ein Fokus-Ereignis ausgelöst, das die folgenden Berechnungen tut und aktualisiert die Scroll-Position:

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

Klebt den unteren Rand der Eingabe/Textbereich an die Spitze der Tastatur. Funktioniert wie ein Zauber, selbst wenn die Lösung dieses bisschen JavaScript durchlaufen muss.

Answer 2

Nun, sollte logischerweise die Ansicht nach oben, wenn die Tastatur öffnet. Ich habe ein ähnliches Problem mit iOS7 konfrontiert und um es zu beheben, habe ich einige CSS-Tweaks angewendet.

Tweaks wurden auf die Wrapper-Klasse/ID angewendet, die den Inhalt der App enthält.

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

Note - Höhe und Breite dynamisch abhängig von der Gerätehöhe und -breite

height = window.innerHeight 
width = window.innerWidth 

Durch die Verwendung von jQuery Selektoren Höhe und Breite des Einwickeln Klasse/id beigefügten beurteilt.

Answer 3

hatte gerade ein sehr ähnliches Problem. Einige der auf dieser Seite gefundenen Hacks funktionierten zwar, hatten aber unangenehme Nebeneffekte (wie Scrollen oder CSS-Layout). Endlich kam ein nagelneuer dummer Hack.

Ansichtsfenster-Meta-Tag:

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

JavaScript nach Last laufen:

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

Und das ist es. Works on iOS 7 und ich habe keine Ahnung, warum.

Answer 4

Funktioniert für mich.

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

Answer 5

Ich denke, die Frage ist hier von Framework7 stammt.

Der obige Code in meiner index.js Datei funktioniert wie Charme.