Android HTML5 - weiche Tastatur überlappt Eingabefeld

Question

Ich bin ein bisschen müde auf der Suche nach einer Lösung für überlappende Eingabefeld von Soft-Tastatur auf Android. Mein Problem ist sehr ähnlich zu diesem: Soft Keyboard Overlapping with EditText Field obwohl in diesem Fall es in HTML5, nicht native Anwendung auftritt.

Genauer gesagt: Wenn das Eingabefeld vollständig von der Tastatur abgedeckt ist, wird eine ganze Seite gescrollt und dieses Feld wird sichtbar - das ist OK. Aber wenn diese Eingabe an der Kante des sichtbaren Bereichs war (nachdem die Tastatur erscheint), überlappt meine weiche Tastatur sie und die Seite wird überhaupt nicht scrollen. Die Seite wird nach Eingabe eines ersten Zeichens gescrollt.

Mein Kunde dieses Verhalten nicht mag ... Es kommt sicher auf Galaxy Tab 10" - Android 4.0.3, Lenovo Tablet -. Android 3.1

ich versucht habe Eingabe der Höheneinstellung, mit box-sizing:border-box;, -webkit-appearance: textfield;, -webkit-user-select: text;, -webkit-writing-mode: horizontal-tb;, -webkit-rtl-ordering: logical; und einige mehr, aber nichts funktionierte.

Haben Sie eine Idee? ich würde CSS Lösungen bevorzugen, ist Javascript Seite Scrollen für mich keine Antwort in diesem Fall (Kundenwunsch).

Vielleicht ist es Ju st ein Android Web Browser Bug ohne Workarounds oder ein spezifisches Problem aufgrund von einigen Eltern Stil der Eingabe (Ich habe bereits versucht, alle position: absolute Eigenschaften zu entfernen)?

Alle Vorschläge sind willkommen.

Answer 1

Der einfachste Weg, um diese Android-böse (und jetzt auch in ios7) zu lösen, ist die Verwendung der Eingänge Fokus und Blur-Ereignisse. Wenn Sie das Fußzeilen-Tag nicht verwenden, ersetzen Sie es einfach durch die Klasse Ihres Fußzeilenelements.

In jQuery:

$("input").focus(function(){ 
    $('footer').hide(); 
}); 

$("input").blur(function(){ 
    $('footer').show(); 
}); 

Answer 2

Ich hatte dieses lästige Problem, im Zusammenhang mit meinem CSS-Framework - mobile-Winkel-ui. So ist es bekannt Bug im Internet, und ich verbrachte Stunden auf der Suche nach Fix im Web, aber leider keine der vorgeschlagenen Lösungen löste meinen speziellen Fall. Endlich habe ich einige Tests gemacht, und es stellte sich heraus, dass dieses Verhalten von meinem Framework verursacht wurde. (Ich habe es an mobile-angular-ui-Autoren gemeldet, aber ich habe keine Antwort erhalten.) Wahrscheinlich möchten Sie, wie ich, nur wenige Tests durchführen, um herauszufinden, ob dieses Problem mit der Architektur Ihrer App zusammenhängt. Ja wirklich. Kommentiere den gesamten css-Code aus und beginne mit einer leeren, reinen html-Seite mit Formularen darauf. Wenn alles in Ordnung ist (Formular sollte nach oben scrollen, um im sichtbaren Teil der Ansicht zu zeigen, über der Soft-Tastatur), wenn Ihr CSS auskommentiert/ausgeschaltet ist, liegt Ihr Problem in CSS, genau wie in meinem Fall. Für diejenigen, die in ihrer Apps Mobile-Winkel-ui verwenden, und in diese Frage bekommen, dieses Stück Code hat den Job für mich:

html { 
    overflow: auto; 
} 
body { 
    height:auto; 
    overflow: auto; 
} 
.scrollable { 
    position:inherit; 
} 

Der Rest auf Ihrem speziellen Fall abhängt.

Ich hoffe, das hilft.