it-swarm.com.de

window.resize aufgrund einer virtuellen Tastatur verursacht Probleme mit jquery mobile

Ich habe ein ungewöhnliches Problem und suche nach Vorschlägen. Grundsätzlich verwende ich:

  • JQuery Mobile 1.1
  • JQuery 8.2
  • PhoneGap (Cordova) 2.1

Wenn ich auf vielen Seiten meiner App auf dem iPhone den Cursor in ein Eingabefeld stecke, wird die virtuelle Tastatur geöffnet. Das ist gut und erwartet.

Hier ist das Problem: In einigen Fällen (aber nicht in allen) wird durch das Platzieren des Cursors in ein Eingabefeld das window.resize-Ereignis ausgelöst. Ich habe dies über den folgenden Code bestätigt:

    $(window).resize(function(e) {
        alert('The window resize occurred!  Width: ' + $(window).width() + " Height: " + $(window).height());
        debugger;
        return false;
    });

Unmittelbar nachdem das window.resize -Ereignis aufgelöst wurde, beschließt JQueryMobile, die Seitengröße auf eine falsche Höhe zu ändern. Ich kann erkennen, dass es sich um die Seite handelt, weil ich jedem Element einen anderen Farbrahmen hinzugefügt habe, um zu sehen, was was war. In vielen Fällen führt diese Aktion zur Größenänderung dazu, dass die Hälfte meiner grafischen Benutzeroberfläche unter dem unteren Rand des Divs überläuft, und manchmal erscheint der Cursor auch unter dem Div versteckt. 

Am besten versteht man es mit einem Screenshot:

window.resize() triggering page resize

Ich erwarte nicht wirklich, dass jemand eine genaue Antwort darauf hat. Ich suche nur nach Debugging-Tipps. Ich fügte meinem "window.resize ()" - Ereignis eine "debugger" -Anweisung hinzu und versuchte, den Code schrittweise durchzugehen. Ich hatte gehofft, zu einem anderen Listener für die Größenänderung geführt zu werden, der die Größe der Seite ändern soll. Wenn ich das finden kann, kann ich es vorübergehend verkrüppeln, wenn jemand ein Formularelement auswählt, und dann die Größenänderung bei Unschärfe oder Orientierungsänderung erneut aktivieren. Das Problem ist, ich habe jede Codezeile durchlaufen und der Debug-Prozess wird kurz vor der Größenänderung angehalten.

Ich frage mich, ob außer window.resize noch ein anderes Ereignis ausgelöst wird. Also fügte ich die beiden Zeilen hinzu:

    document.addEventListener("throttledresize", function() { alert("throttledresize fired.") }, false);
    document.addEventListener("orientationchange", function() { alert("orientationchange fired.") }, false);

Weder jedoch gefeuert. Ich bin also etwas festgefahren. Ich habe ein gutes Gefühl, ich weiß, was das Problem ist, aber ich kann es nicht auf die Quelle zurückführen. Irgendwelche Vorschläge, wo ich diesen geheimnisvollen Code finden kann, der die Größe der Seite in window.resize () ändert?

24
Anthony

Ich bin froh zu sehen, dass ich nicht verrückt bin! Ich bin glücklich zu berichten, dass ich eine ziemlich gute Lösung implementiert habe. Hier sind die Schritte, falls Sie dasselbe tun möchten:

1) Gehen Sie in jquery.mobile-1.x.x.js

2) Suchen Sie $ .mobile = $ .extend () und fügen Sie die folgenden Attribute hinzu:

last_width: null,
last_height: null,

3) Ändern Sie getScreenHeight wie folgt:

getScreenHeight: function() {
    // Native innerHeight returns more accurate value for this across platforms,
    // jQuery version is here as a normalized fallback for platforms like Symbian

    if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
    {
        this.last_height = window.innerHeight || $( window ).height();
        this.last_width = $(window).width();
    }
    return this.last_height;
}

Grundsätzlich verhindert dies, dass jQuery die Seitenhöhe neu berechnet, es sei denn, die Breite ändert sich auch. (d. h. Orientierungsänderung) Da die Soft-Tastatur nur die Höhe beeinflusst, gibt diese Methode den zwischengespeicherten Wert anstelle einer geänderten Höhe zurück.

Ich werde einen separaten Beitrag erstellen, um zu fragen, wie die $ .mobile.getScreenHeight-Methode ordnungsgemäß überschrieben werden kann. Ich habe versucht, den folgenden Code in eine separate JS-Datei einzufügen, aber es hat nicht funktioniert:

delete $.mobile.getScreenHeight;
$.mobile.last_width = null;
$.mobile.last_height = null;
$.mobile.getScreenHeight = function() 
{
   ... the code listed above
}

Es hat meistens ausgelöst, aber auch die ursprüngliche Funktion. Irgendwie komisch. Ich habe ein eigenes Thema darüber geschrieben, wie man $ .mobile richtig erweitert: Richtige Möglichkeit, eine JQuery Mobile-Methode in $ .mobile zu überschreiben

10
Anthony

Ich hatte ein ähnliches Problem:

  $('#main-browse').bind("orientationchange", function(event) {
    //Put the page dimensions for example with minimum height property

  }
3
mram888

Ich hatte das gleiche Problem in Cordova (3.x) mit JQuery Mobile 1.4 - daher ist es wahrscheinlich, dass dies von den Autoren der Bibliothek nicht angesprochen wird. Ich habe viele verschiedene Lösungen ausprobiert - aber keine konnte das wirklich beheben. Der nächstgelegene Kandidat bestand darin, einfache Handler zu binden, die an die Ereignisse "throttlerizeize" und "pageshow" des Fensters bzw. der Dokumentobjekte gebunden waren. 

Trotzdem verlor ich immer noch das Gefühl, dass die Benutzeroberfläche "gesperrt" war, und der Benutzer konnte meine gesamte Benutzeroberfläche nach dem Beenden der Tastatur nach oben ziehen. Sicher, die Kopf- und Fußzeile bewegte sich nicht, aber mein Hintergrund und der Hauptinhaltsbereich waren jetzt ziehbar und Bildlaufleisten wurden angezeigt. Völlig inakzeptabel, wenn Sie sich für das native App-Gefühl ...

Also entschied ich mich, in Chrome/Safari Firebug nachzuschauen und herauszufinden, wo die zusätzlichen Pixel zum Boxmodell hinzugefügt werden. Seltsamerweise fiel mir auf, dass nicht die Höhe verändert wurde. In meinem Fall war es die Auffüllung auf der aktiven Seite. Also habe ich eine Lösung aus einem anderen Stack-Posting angepasst:

function resetActivePageHeight() {
var aPage = $( "." + $.mobile.activePageClass ),
  aPagePadT = parseFloat( aPage.css( "padding-top" ) ),
  aPagePadB = parseFloat( aPage.css( "padding-bottom" ) ),
  aPageBorderT = parseFloat( aPage.css( "border-top-width" ) ),
  aPageBorderB = parseFloat( aPage.css( "border-bottom-width" ) );
aPage.css( "min-height", deviceInfo.height - aPagePadT - aPagePadB - aPageBorderT - aPageBorderB )
.css("top","0px").css("padding","0px");}

Dann band ich sie an die Dokument- und Fensterereignisse auf dem Gerät bereit.

  $( document ).bind( "pageshow", resetActivePageHeight );
  $( window ).bind( "throttledresize", resetActivePageHeight );

Auch wenn ich gerne Kredit in Anspruch nehmen möchte, finde ich, dass ich gerade einen zusätzlichen Winkel zur guten Idee eines anderen gefunden habe.

2
Robert Sherman

gehen Sie zu Ihrer Android-Manifest-Datei und ändern oder aktualisieren Sie in der Aktivität auf diesen WertAndroid:windowSoftInputMode="adjustResize "

ich weiß für eine Tatsache, dass adjustPan die Seite bricht, sodass die Steuerelemente ausgeblendet sind. Der Standardwert (nicht angegeben) ist möglicherweise in Ordnung, und es gibt andere Optionen hier . Ich denke, wenn die Größe nicht geändert werden soll, wird jqm nicht mitgeteilt, dass KB angezeigt wird

lass jqm so wie es ist, ohne deine Änderungen und es wird seine Arbeit erledigen

Ich hatte ein Problem, bei dem die virtuelle Tastatur das Ansichtsfenster erweitert und den Inhalt darunter (ein externes Bedienfeld) anzeigt.

Ich habe es gelöst, indem ich die CSS-Höhe basierend auf der Fensterhöhe eingestellt habe:

$('#page').css('height', $(window).height());
0
Joe Lannen