stile dello schermo quando la tastiera virtuale è attiva

Question

Idealmente, vorrei che l'intera interfaccia avesse uno stile personalizzato che è visto su ios (itouch/ipad) o equivalente Android con il presente virtuale della tastiera. Vedi sotto per ulteriori dettagli.

Un set personalizzato di regole di hacking CSS per essere attivo, quando la tastiera è "presente", è anche una soluzione accettabile.

Consente di indirizzare sia androidi che ios, su un sito Web (HTML/JavaScript/CSS) Inoltre, il layout interno è: "fluido".

Modifica: Questo era più design, quindi testo; Quindi i cambiamenti non sono disorientanti. Al livello più basso, desidero solo un cambio di progettazione con e senza i tasti virtuali (Forse solo una modifica in background).

La domanda sulla quale si tratta di un'idea di progettazione valida o negativa è discutibile. Tuttavia, ritengo irrilevante la domanda. Per un simile exploit è possibile utilizzare più del testo (come giochi o media interattivi).

Da qui la generosità: Nonostante non necessitano la risposta per il progetto su cui stavo lavorando (un design alternativo è stato utilizzato). Credo ancora che questa domanda possa beneficiare di una risposta.

comportamento predefinito

     +--------+ 
         |  | 
+------------+  +-+-hidden-+-+ <- ~50% hidden 
| +--------+ |  | +--------+ | 
| |  | |  | |visible | | 
| |  | | \ | |  | | <- ~50% visible 
| | 100% | | ==> | +--------+ | 
| |  | | / | |virtual | | 
| |  | |  | | keys | | 
| +--------+ |  | +--------+ | 
+------------+  +------------+ 

comportamento desiderato

+------------+  +------------+ 
| +--------+ |  | +--------+ | 
| |  | |  | |visible | | <- 100% visible (example styling) 
| |  | | \ | |  | |  Custom Styling 
| | 100% | | ==> | +--------+ | 
| |  | | / | |virtual | | 
| |  | |  | | keys | | 
| +--------+ |  | +--------+ | 
+------------+  +------------+ 

Answer 1

Non sono sicuro, è questo l'effetto voluto ?. controllare questo link

http://jsfiddle.net/UHdCw/3/

Aggiornamento

(1). Supponendo che sia un sito Web & in esecuzione sul browser del dispositivo. Quindi possiamo verificare la presenza della tastiera virtuale controllando le dimensioni dello schermo.

Arrivo browser del dispositivo - http://jsfiddle.net/UHdCw/8/show/

Codice: - http://jsfiddle.net/UHdCw/8/

(2). Se stai creando app native con HTML5 & PhoneGap, le cose saranno diverse. Poiché non esiste un hook API diretto per controllare lo stato del keybord, dobbiamo scrivere il nostro own plugin in PhoneGap.

In Android è possibile controllare lo stato di visualizzazione/disattivazione della tastiera utilizzando il codice nativo [check here]. e devo scrivere plugin per PhoneGap per ottenere quegli eventi nel nostro HTML.

[PhoneGap è un esempio.Penso che la maggior parte del codice HTML per quadri nativi avere questo tipo di felicità per agganciare con codice nativo]

aggiornamento iOS

Come ha detto non ci sono cambiamenti in altezza/posizione quando la tastiera è presente. Possiamo fare una cosa, quando l'input ottiene il focus, possiamo aggiungere una classe di riduzione e ridurre le dimensioni degli elementi. Controlla il seguente link

http://jsfiddle.net/UHdCw/28/show/

Answer 2

ho incontrato lo stesso problema, questo funziona per me:

<!-- Android Viewport height fix--> 
<script type="text/javascript"> 
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile"); 
if(isAndroid) { 
    document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">'); 
} 
</script> 

Answer 3

javascript applicare una classe al corpo quando un elemento di ingresso ha focus.

$("input, textarea").focus(function(){ $(document.body).addClass('when-keyboard-showing');  }); 
$("input, textarea").blur(function(){ $(document.body).removeClass('when-keyboard-showing'); }); 

e quindi utilizzare @media query per determinare se vista mobile:

@media (max-width:550px) { 
    body.keyboard-up .header { height:0; padding:0; } 
} 

La combinazione vi permetterà di stilizzare la pagina quando la tastiera è in su, sul cellulare. Grazie.