iOS7 Erkennt Tastatur Höhe mit Javascript?

Nun, dieses Thema hat es hier vor (Was die Höhe der iPad-Bildschirmtastatur?), aber ich denke, es braucht eine Auffrischung durch iOS7 vor kurzem veröffentlicht.

Das Problem:
Ich habe eine Feste position modal, erscheint in der unteren rechten Ecke der Seite. Es hat ein einziges Formular-Feld, das den Fokus erhält, wenn der modal geöffnet. Der Fokus löst das softkeyboard zu öffnen. Das problem ist, dass ich möchte programmatisch die Tastatur erkennt der Höhe zu positionieren, der modal auf der Oberseite der Tastatur, da sonst ein Teil des modal bekommt cutoff von Blick.

, Was ich versucht habe:

    var scrollHere = currentWidget.offset().top;
    //this scrolls the page to the top of the widget, but the keyboard is below.
    setTimeout(function() {
        $('html, body').scrollTop(scrollHere);
    }, 0);

Die Seite scrollt auf der Oberseite des modal sind. Nicht ideal, weil manchmal das Formularfeld versteckt unter der Tastatur.

Ich habe auch versucht, die Alarmierung der Fenster.innerHeight

    alert(window.innerHeight);

Aber, dass sich zeigt, werden die gleichen oder nicht, ob die Tastatur sichtbar ist.

Also meine Frage ist, hat jemand eine Möglichkeit gefunden zu erkennen, die iOS7 Tastatur Höhe in JavaScript? Vielleicht gibt es einen workaround? Unwahrscheinlich, aber könnte das ein bug in iOS7 safari?

Jede Hilfe würde geschätzt werden. Danke.

InformationsquelleAutor zairon87 | 2013-10-02

  1. 9

    Also die Antwort ist, ich war falsch über nicht in der Lage zu erkennen das Fenster.innerHeight ändern.

    Den Grund konnte ich nicht erkennen, die änderung war, weil auf dem iPad die Tastatur animiert aus dem Boden und nicht Feuer ein Fenster resize-Ereignis. Meine Lösung war nicht zu erkennen, der Fenstergröße, die ich aus dem Körper über eine max-Höhe von 100%, wenn der modal geöffnet ist. Dann ich warten, bis der Benutzer den Fokus auf das Textfeld und Bearbeiten Sie die scroll-position an diesem Punkt:

    $(document.body).on('focus', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top - 100);
    }, 0);
});

    Dies ist für, wenn Sie konzentrieren sich auf Ihr input-Feld. iOS mag, um zu versuchen, um Mitte des Fensters auf das Feld, wenn die Tastatur geöffnet wird, und das kann lästig sein, wenn sagen, Sie haben Informationen über die Eingabe der Benutzer sehen muss. Das Beispiel oben scrollt das Fenster so, dass mein text Feld rechts oberhalb der Tastatur. Sie würden denken, dass Sie alles, was Sie tun müssen, aber iOS manchmal versucht zu schlau zu sein.
    Wenn der Benutzer mit der Eingabe beginnt in der Eingangs -, re-Zentren auf den Eingang wieder zu! Also nehmen wir den obigen code, und stellen Sie es auf:

    $(document.body).on('focus keyup', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top - 100);
    }, 0);
});

    Diese Weise wird die Bildlaufposition ändert sich nie aus, wo Sie wollen, während der Benutzer Text eingibt.

    Hinweis: Das einzige mal, ich war in der Lage zu erkennen die änderung im Fenster.innerHeight war im keyup-Ereignis ausgelöst, da zu diesem Zeitpunkt die Tastatur war fertig animieren und voll auf der Seite angezeigt. Im Fokus es immer noch, sagte der innerHeight war das gleiche wie ohne die Tastatur.

    Hey @zairon87, ich habe ein ähnliches Problem, wo ich will position ein Textfeld auf der Oberseite der Tastatur, ist das wirklich fix ist der Eingabe-Ausgabe für Sie auf dem eigentlichen Gerät? Ich war in der Lage zu handhaben, die flackern während der Eingabe auf dem simulator aber nicht in der Lage, damit es funktioniert, auch mit deiner Lösung auf dem aktuellen Gerät (ich bin mit dem iPhone 5 statt iPad). Irgendwelche Vorschläge?
    Zairon, habe ich immer noch keine Abbildung dieses Ding aus. Nach der Tastatur geöffnet ist, bin ich mit dem auf Tastendruck zu erkennen Fensterhöhe, und ich bin noch immer voller Höhe. Hast du es geschafft, tatsächlich zu lösen?

    InformationsquelleAutor zairon87

Schreibe einen Kommentar