jquery/js/HTML5 cambiamento contenuto della pagina quando la tastiera è visibile sui dispositivi mobili

Question

Eventuali duplicati:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

Sto costruendo una versione mobile di un sito web, e io Mi interessa se posso creare usando jquery/js/html5 o qualsiasi altra tecnologia lo stesso effetto a schermo diviso che può essere fatto su app mobili quando la tastiera virtuale è visibile.

Ad esempio, se un utente accede alla mia pagina Web e fa clic su un campo di testo di input, viene visualizzata la tastiera virtuale e il browser ingrandisce automaticamente l'area in cui si trova il campo di testo di input.

Quello che voglio è poter cambiare il contenuto della mia pagina nel momento in cui la tastiera virtuale è visibile in base alla nuova risoluzione (altezza dello schermo - altezza della tastiera), spostando il campo di testo di input nella parte superiore dello schermo, seguito da alcuni suggerimenti a seconda di ciò che l'utente inserisce nel campo di testo.

Ecco alcuni schizzi per vedere che cosa sto parlando:

Questa è la visualizzazione di una pagina senza tastiera, i risultati in base alla ricerca:

pagina con tastiera ritratto, il logo scompare, il metodo di scrittura si sposta verso l'alto, e un massimo di 4 articoli sono mostrato

pagina con tastiera orizzontale, il logo scompare, thext ingresso si muove verso l'alto e viene ingrandita, solo 2 elementi sono mostrati

è la tastiera è nascosta, la pagina dovrebbe andare a turbare 1.

Spero che questo aiuti.

Answer 1

ho provato una prima soluzione per il problema prendendo l'evento resize Con questo si può sapere l'orientamento e Gest è la tastiera è visibile

UPDATE: l'aggiunta del supporto Safari Mobile iOS con LKM solution

var is_keyboard = false; 
var is_landscape = false; 
var initial_screen_size = window.innerHeight; 

/* Android */ 
window.addEventListener("resize", function() { 
    is_keyboard = (window.innerHeight < initial_screen_size); 
    is_landscape = (screen.height < screen.width); 

    updateViews(); 
}, false); 

/* iOS */ 
$("input").bind("focus blur",function() { 
    $(window).scrollTop(10); 
    is_keyboard = $(window).scrollTop() > 0; 
    $(window).scrollTop(0); 
    updateViews(); 
}); 

Ora è possibile visualizzare e nascondere il logo e alcuni voce

function updateViews() { 
    $("li").hide(); 
    if (is_keyboard) { 
     $("#logo").hide(); 
     if (is_landscape) { 
      $("li").slice(0, 2).show(); 
     } 
     else { 
      $("li").slice(0, 4).show(); 
     } 
    } 
    else { 
     $("#logo").show(); 
     $("li").show(); 
    } 
} 

Per la JS basato su questo HTML

<div id="logo">Logo</div> 
<input type="text"><input type="submit" value="search"> 
<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

Partenza my example page