jquery mobile ausblenden fixed-footer-Tastatur
Auf meinem iPhone, ich möchte die Fußzeile ausgeblendet werden, wenn ein Textfeld geschoben wird und die Tastatur erscheint. Jetzt ist es nur positioniert sich oberhalb der Tastatur und zu wenig von den Webseite gezeigt wird.
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<div data-role="controlgroup" data-type="vertical">
<ul><li><input data-iconpos="top" data-icon='plus' type="button" value="Tur" id='nyTur' /></li>
<li><input data-iconpos="top" data-icon='plus' type="button" value="48%" id='ny48' /></li>
<li><input data-iconpos="top" data-icon='plus' type="button" value="100%" id='ny100' /></li>
</ul>
</div>
</div><!-- /navbar -->
</div><!-- /footer -->
- Sie können nicht erkennen, wenn die Tastatur angezeigt wird. Alles, was Sie tun können, ist zu erkennen, wenn input-Elemente den Fokus besitzen und verstecken Sie es dann.
- Wie mache ich das? Es scheint zu funktionieren gut in Safari auf dem iPhone, aber nicht mit Chrome und nicht, wenn die Seite wurde Hinzugefügt, um den home-Bildschirm als link/app.
$("input").on("focus", function() { $("div[data-role=footer]").hide(); });
Tunshow()
auf Unschärfe wieder zu zeigen 🙂
InformationsquelleAutor user2996395 | 2013-11-19
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist ein schwieriges problem zu bekommen 'rechts'. Sie können versuchen, und blenden Sie die Fußzeile auf input-element den Fokus, und zeigen Sie auf Unschärfe, aber das ist nicht immer zuverlässig auf iOS. Jeder so oft (ein mal in zehn, sagen wir, auf meinem iPhone 4S) das focus-Ereignis scheint nicht ausgelöst (oder vielleicht gibt es eine race-Bedingung mit JQuery Mobile), und die Fußzeile nicht ausgeblendet werden.
Nach viel Versuch und Irrtum, kam ich mit dieser interessanten Lösung:
Im wesentlichen: die JavaScript verwenden, um zu bestimmen, die Fenster-Höhe des Gerätes, dann dynamisch erstellen Sie eine CSS-media-query zum ausblenden der Fußzeile, wenn die Höhe des Fensters schrumpft, von 10 Pixel. Denn die Eröffnung der Tastatur die Größe des browser-display, das nie versagt auf iOS. Weil es über die CSS-engine, anstatt JavaScript, es ist viel schneller und reibungsloser zu!
Hinweis: ich habe mit "Sichtbarkeit:versteckt" weniger glitchy, als 'display:none' oder 'position:static', aber Ihre Laufleistung variieren.
Hinzufügen, um Richard die Antwort, diese beiden Griffe Ausrichtungen auf iPhone:
P. S.
Ich führte zu diesem Thema einen versteckten Kommentar-Formular diese Frage.
EDIT: einige Klammern fehlen würden, so diese nicht den gewünschten Effekt haben, wenn in der Landschaft. Ist jetzt behoben.
Tolles Konzept.
Es fixiert mein problem zum größten Teil.
Ich verbesserte es durch umschreiben der CSS auf die Ausrichtung ändern.
Dies funktioniert für mich während meiner app...
Einen viel besseren Ansatz, den ich fand, war zu erkennen, wenn ein Eingabe-oder textfield-konzentriert sich nur auf iOS.
Versuchen, diese JS: