stile dello schermo quando la tastiera virtuale è triggers

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.

Una regola personalizzata per l’hacking dei CSS è triggers, quando la tastiera è “presente”, è anche una soluzione accettabile.

Mira ad androidi e ios, su un sito web (HTML / JavaScript / CSS) Inoltre, si noti che il layout all’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 un cambiamento di sfondo).

La domanda sulla quale questa è una buona o ctriggers idea progettuale è discutibile. Tuttavia, ritengo irrilevante la domanda. Per un simile exploit è ansible utilizzare più del testo (come giochi o media interattivi).

Da qui la generosità: nonostante non abbia più bisogno della risposta per il progetto su cui stavo lavorando (è stato usato un disegno alternativo). Credo ancora che questa domanda possa beneficiare di una risposta.

Comportamento predefinito

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

Comportamento desiderato

 +------------+ +------------+ | +--------+ | | +--------+ | | | | | | |visible | |  | +--------+ | | | | | / | |virtual | | | | | | | | keys | | | +--------+ | | +--------+ | +------------+ +------------+ 

Non sono sicuro, è questo l’effetto desiderato? controlla questo link

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

Aggiornare

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

Controlla nel browser del dispositivo – http://jsfiddle.net/UHdCw/8/show/

codice: – http://jsfiddle.net/UHdCw/8/

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

In Android puoi controllare lo stato di mostrare / hide la tastiera usando il codice nativo [ controlla qui ]. e devo scrivere plugin per PhoneGap per ottenere quegli eventi nel nostro HTML.

[PhoneGap è un esempio. Penso che la maggior parte degli html per i framework nativi abbia questo tipo di felicità da colbind con il codice nativo]

aggiornamento iOS

Come hai detto, non c’è alcun cambiamento di altezza / posizione quando è presente la tastiera. Possiamo fare una cosa, quando l’input ottiene il focus, possiamo aggiungere una class di riduzione e ridurre le dimensioni degli elementi. Controlla il seguente link

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

Ho riscontrato lo stesso problema, questo funziona per me:

   

Avere JavaScript applicare una class al corpo quando un elemento di input è focus .

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

E quindi utilizza @media query @media per determinare se la visualizzazione mobile:

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

La combinazione ti consente di stilizzare la pagina quando la tastiera è triggers, sul cellulare. Grazie.

Ho il problema esatto. Ecco la mia soluzione fino ad ora, sarei grato se qualcuno potesse testare su Apple: http://jsfiddle.net/marcchehab/f2ytsu8z/show (per vedere il codice sorgente e tutto: http://jsfiddle.net/marcchehab/f2ytsu8z )

Rilevo se la tastiera è fuori nel modo seguente: Al momento del caricamento calcolerò una variabile “sumedges”, che è $ (finestra) .width () + $ (finestra) .height (). Quindi, nel caso di $ (window) .resize () Confronto: Se la sum $ (window) .width () + $ (window) .height () è diventata più piccola di “sumedges”, significa che la tastiera è su. Funziona qui su Chrome su Android. Puoi facilmente modificare questo codice per fare quello che vuoi.

 var sumedges = $(window).width() + $(window).height(); $(window).resize(function(){ if($(window).width() + $(window).height() < sumedges) { $("#display").html("keyboard out"); } else { $("#display").html("keyboard in"); } }); 

Usando jQuery, non ho trovato alcun modo per forzare una transizione fluida quando si fa clic su un input e la tastiera si apre. Ma forse è ansible ingannare il sistema: nel violino, ho impostato un input falso (blu). Quando si fa clic su di esso, l'input reale appare appena sotto il mio display (giallo) ed è selezionato. In questo modo sembra tutto liscio qui su Chrome su Android. Ancora una volta, sarei grato se voi ragazzi poteste testare.

 $("#fakeinput").click(function(){ $("#realinput").show().children("input").focus(); $("html,body").scrollTop($("#display").offset().top); }); $("#realinput input").blur(function(){ $("#realinput").hide(); });