jquery mobile hide fisso footer quando tastiera

Sul mio iPhone, voglio che il piè di pagina sia nascosto quando viene premuto un campo di testo e viene visualizzata la tastiera. In questo momento è solo posizionandosi sopra la tastiera e viene mostrato troppo poco del sito web.

Questo è un problema difficile da ottenere ‘giusto’. Puoi provare a hide il piè di pagina sulla messa a fuoco dell’elemento di input e mostrare su sfocatura, ma ciò non è sempre affidabile su iOS. Ogni tanto (una volta su dieci, per esempio, sul mio iPhone 4S) l’evento di messa a fuoco sembra non riuscire a sparare (o forse c’è una condizione di gara con JQuery Mobile), e il footer non viene nascosto.

Dopo molte prove ed errori, ho trovato questa soluzione interessante:

  ...various JS and CSS imports...   

In sostanza: utilizza JavaScript per determinare l’altezza della finestra del dispositivo, quindi crea dynamicmente una query multimediale CSS per hide il piè di pagina quando l’altezza della finestra si riduce di 10 pixel. Poiché l’apertura della tastiera ridimensiona il display del browser, questo non fallisce mai su iOS. Poiché utilizza il motore CSS anziché JavaScript, è molto più veloce e scorrevole!

Nota: ho scoperto che usare “visibilità: nascosta” meno glitchy di “display: none” o “position: static”, ma il tuo chilometraggio può variare.

Aggiungendo la risposta di Richard, questo gestisce entrambi gli orientamenti su iPhone:

  

PS Sono stato portato a questo argomento da un commento nascosto da questa domanda .

EDIT: mancavano alcune parentesi quindi questo non ha avuto l’effetto desiderato quando in paesaggio. Risolto ora.

Ottimo approccio. Ha risolto il mio problema per la maggior parte. L’ho migliorato riscrivendo il CSS sul cambiamento di orientamento.

   

Questo funziona per me in tutta la mia app …

 //hide footer when input box is on focus $(document).on('focus', 'input, textarea', function() { $("div[data-role=footer]").hide(); }); //show footer when input is NOT on focus $(document).on('blur', 'input, textarea', function() { $("div[data-role=footer]").show(); }); 

Un approccio molto migliore che ho trovato è stato quello di rilevare quando un input o un campo di testo è focalizzato solo su iOS.

Prova questo JS:

 if(/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase())) { $(document).on('focus', 'input, textarea', function() { $(".ui-footer").hide(); }); $(document).on('blur', 'input, textarea', function() { $(".ui-footer").show(); }); }