risposta-alla-domanda-sullo-sviluppo-web-bd.com

stile dello schermo quando la tastiera virtuale è attiva

Idealmente, vorrei che l'intera interfaccia avesse un stile personalizzato che si vede su ios (iTouch/ipad) o Android equivalente con la tastiera virtuale presente. Vedi sotto per maggiori dettagli.

Una soluzione personalizzata per l'attivazione delle regole di hacking CSS, quando la tastiera è "presente", è anche una soluzione accettabile.

Utilizza sia androidi che ios su un sito Web (HTML/JavaScript/CSS). Inoltre, 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 cambiamento di progettazione con e senza i tasti virtuali (Forse solo un cambio di sfondo).

La domanda sulla quale, questa è una buona o cattiva idea di design, è discutibile. Tuttavia, ritengo sia irrilevante per la domanda. Per un tale exploit può avere più usi del testo (come giochi o media interattivi) .

Da qui la generosità: Nonostante non sia più necessaria la risposta per il progetto a cui stavo lavorando (è stato utilizzato un design alternativo). Credo ancora che questa domanda possa beneficiare della risposta.

Comportamento predefinito

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

Comportamento desiderato

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

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

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

Update

(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 creando un'app nativa 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 proprio plugin in Phonegap.

In Android puoi controllare mostra/nascondi stato della tastiera usando il codice nativo [ controlla qui ]. E devi scrivere il plugin Phonegap per ottenere quegli eventi nel nostro HTML.

[Phonegap è un esempio. Penso che la maggior parte dell'html per i framework nativi abbia questo tipo di felicità da agganciare al codice nativo]

Aggiornamento iOS

Come hai detto, non c'è alcun cambiamento in altezza/posizione quando è presente la tastiera. Possiamo fare una cosa, quando l'input si focalizza possiamo aggiungere una classe di restringimento e ridurre le dimensioni degli elementi. Controlla il seguente link.

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

21
Praveen Vijayan

Ho riscontrato 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> 
14
benone

Chiedi a JavaScript di applicare una classe a body quando un elemento di input ha focus.

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

E poi usa @media query per determinare se la visualizzazione mobile:

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

La combinazione ti permetterà di stilizzare la pagina quando la tastiera è alzata, sul cellulare. Grazie.

11
redolent

Ho il problema esatto Ecco la mia soluzione finora, apprezzerei 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 non è presente nel modo seguente: Al caricamento, calcolo una variabile "sumedges", che è $ (finestra) .width () + $ (finestra) .height (). Quindi, nel caso di $ (finestra) .resize (), confronto: se la somma $ (finestra) .width () + $ (finestra) .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 ti piace.

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 graduale quando si fa clic su un input e la tastiera si apre. Ma forse è possibile ingannare il sistema: nel violino, ho impostato un input falso (blu). Quando fai clic su di esso, il vero input appare appena sotto il mio display (giallo) e viene selezionato. In questo modo sembra tutto liscio qui su Chrome su Android. Ancora una volta, apprezzerei 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();
});
0
Marc Chéhab