Comment empêcher les éléments fixes de sauter dans Mobile Safari avec des claviers virtuels ?

Éléments fixes bogués dans Mobile Safari avec clavier virtuel

Gérer les éléments fixes dans Mobile Safari peut être un défi, surtout lorsqu'un clavier virtuel est ouvert. Un problème courant survient lorsqu'un élément de navigation fixe saute de manière inattendue lorsqu'un champ de saisie dans la navigation obtient le focus.

Cause et solution

Ce comportement est probablement dû à un problème connu. problème dans Mobile Safari. La solution proposée consiste à modifier dynamiquement le positionnement des éléments fixes.

• Lorsqu'un élément d'entrée obtient le focus et que le clavier virtuel apparaît, changez la propriété de position des éléments fixes en absolue.
• Restaurez le positionnement fixe d'origine une fois que l'élément d'entrée perd le focus et que le clavier est masqué.

Extrait de code

L'extrait de code suivant illustre cette solution :

.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');
    });
}

En ajoutant ce code, l'élément de navigation restera fixe en bas de la page même lorsque l'utilisateur interagit avec le champ de saisie et que le clavier virtuel apparaît.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!