Wie kann verhindert werden, dass feste Elemente in Mobile Safari mit virtuellen Tastaturen springen?

Fehlerhafte feste Elemente in Mobile Safari mit virtueller Tastatur

Der Umgang mit festen Elementen in Mobile Safari kann eine Herausforderung sein, insbesondere wenn eine virtuelle Tastatur vorhanden ist wird geöffnet. Ein häufiges Problem tritt auf, wenn ein festes Navigationselement unerwartet springt, wenn ein Eingabefeld innerhalb der Navigation den Fokus erhält.

Ursache und Lösung

Dieses Verhalten ist wahrscheinlich auf ein bekanntes Problem zurückzuführen Problem in Mobile Safari. Die vorgeschlagene Lösung beinhaltet die dynamische Änderung der Positionierung fester Elemente.

• Wenn ein Eingabeelement den Fokus erhält und die virtuelle Tastatur angezeigt wird, ändern Sie die Positionseigenschaft der festen Elemente auf absolut.
• Stellen Sie die ursprüngliche feste Positionierung wieder her, sobald das Eingabeelement den Fokus verliert und die Tastatur ausgeblendet wird.

Codeausschnitt

Der folgende Codeausschnitt veranschaulicht diese Lösung:

.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
} 

if ('ontouchstart' in window) {
    /* cache dom references */ 
    var $body = $('body'); 

    /* bind events */
    $(document)
    .on('focus', 'input', function() {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input', function() {
        $body.removeClass('fixfixed');
    });
}

Durch das Hinzufügen dieses Codes bleibt das Navigationselement am unteren Rand der Seite fixiert, auch wenn der Benutzer mit dem Eingabefeld interagiert und die virtuelle Tastatur erscheint.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass feste Elemente in Mobile Safari mit virtuellen Tastaturen springen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!