web-dev-qa-db-fra.com

style d'écran lorsque le clavier virtuel est actif

Idéalement, je voudrais que l’ensemble de l’interface ait un style personnalisé visible sur le ios (iTouch/ipad) ou Android équivalent au clavier virtuel présent. Voir ci-dessous pour plus de détails.

Un ensemble personnalisé de règles de piratage CSS à activer lorsque le clavier est "présent" est également une solution acceptable.

Cible les androïdes et les ios, sur un site Web (HTML/JavaScript/CSS) Notez également que la présentation à l'intérieur est la suivante: "fluide".

Edit: C’était plus du design, puis du texte; Donc, les changements ne sont pas dépaysant. Au niveau le plus bas, je souhaite juste un changement de conception avec et sans les clés virtuelles (Peut-être juste un changement de fond).

La question sur laquelle, ceci est une bonne ou une mauvaise idée de design, est discutable. Cependant, j’estime qu’elle n’est pas pertinente. Pour un tel exploit peut avoir plus d’utilisations que le texte (comme des jeux ou des médias interactifs) .

D'où la prime: Bien que je n'ai plus besoin de la réponse pour le projet sur lequel je travaillais (une conception alternative a été utilisée). Je crois toujours que cette question peut bénéficier d'une réponse.

comportement par défaut

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

comportement souhaité

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

Je ne suis pas sûr, est-ce l'effet désiré? vérifier ce lien

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

Mettre à jour

(1). En supposant qu'il s'agisse d'un site Web et d'un navigateur sur l'appareil. Ensuite, nous pouvons vérifier la présence de clavier virtuel en vérifiant la taille de l'écran.

Vérifier dans le navigateur de l'appareil - http://jsfiddle.net/UHdCw/8/show/

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

(2). Si vous construisez une application native avec HTML5 et Phonegap, les choses seront différentes. Comme il n'y a pas de connexion directe à l'API pour vérifier le statut du clavier, nous devons écrire notre plugin propre dans Phonegap.

Dans Android vous pouvez vérifier le statut d'affichage/de masquage du clavier en utilisant le code natif [ cocher ici ]. Vous devez écrire le plug-in Phonegap pour obtenir ces événements dans notre code HTML.

[Phonegap est un exemple. Je pense que la plupart des html vers les frameworks natifs ont ce genre de félicité pour s'accrocher au code natif]

Mise à jour iOS

Comme vous l'avez dit, il n'y a pas de changement de hauteur/position lorsque le clavier est présent. Nous pouvons faire une chose: lorsque l'entrée obtient le focus, nous pouvons ajouter une classe de réduction et réduire la taille des éléments. Vérifiez le lien suivant.

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

21
Praveen Vijayan

J'ai rencontré le même problème, cela fonctionne pour moi:

<!-- 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

Demandez à JavaScript d’appliquer une classe à corps quand un élément d’entrée a focus.

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

Et puis utilisez @media questions pour déterminer si la vue mobile:

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

La combinaison vous permettra de styliser la page lorsque le clavier est en place, sur mobile. Merci.

11
redolent

J'ai le problème exact. Voici ma solution jusqu'à présent, j'apprécierais que quelqu'un puisse tester sur Apple: http://jsfiddle.net/marcchehab/f2ytsu8z/show (pour voir le code source et tout: http://jsfiddle.net/marcchehab/f2ytsu8z )

Je détecte si le clavier est désactivé de la manière suivante: lors du chargement, je calcule une variable "sumedges", qui est $ (fenêtre) .width () + $ (window) .height (). Ensuite, dans le cas de $ (window) .resize (), je compare: Si la somme $ (window) .width () + $ (window) .height () est devenue plus petite que "sumedges", cela signifie que le clavier est en dehors. Cela fonctionne ici sur Chrome sur Android. Vous pouvez facilement modifier ce code pour faire ce que vous voulez.

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

À l'aide de jQuery, je n'ai trouvé aucun moyen de forcer une transition en douceur lorsque vous cliquez sur une entrée et que le clavier se détache. Mais il est peut-être possible de tromper le système: Dans le violon, j'ai configuré une fausse entrée (bleue). Lorsque vous cliquez dessus, l'entrée réelle apparaît juste en dessous de mon écran (jaune) et est sélectionnée. De cette façon, tout se passe bien sur Chrome sur Android. Encore une fois, je vous serais reconnaissant si vous pouviez tester.

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

$("#realinput input").blur(function(){
    $("#realinput").hide();
});
0
Marc Chéhab