Stylisation de l'écran lorsque le clavier virtuel est actif

Question

Idéalement, je voudrais que l'ensemble de l'interface ait un style personnalisé tel qu'il est vu sur iOS (itouch / ipad) ou l'équivalent Android avec le clavier virtuel présent. Voir ci-dessous pour plus de détails.

Un ensemble de règles de piratage CSS personnalisées qui s'activent lorsque le clavier est "présent" est également une solution acceptable.

Cible à la fois les appareils Android et iOS, sur un site web (HTML/JavaScript/CSS). Notez également que la mise en page est : "fluide".

Édition : Il s'agit davantage de design que de texte ; les changements ne sont donc pas déroutants. En gros, je ne désire qu'un changement de design avec et sans les touches virtuelles (Peut-être juste un changement d'arrière-plan).

La question de savoir si c'est une bonne ou une mauvaise idée de design est sujette à débat. Cependant, je trouve que c'est sans importance par rapport à la question. Une telle manipulation peut avoir des utilisations autres que le texte (comme les jeux ou les médias interactifs).

D'où la prime : Bien que je n'aie plus besoin de la réponse pour le projet sur lequel je travaillais (un design alternatif a été utilisé), je pense toujours que cette question peut bénéficier d'une réponse.

Comportement par défaut

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

Comportement souhaité

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (exemple de style)
| |        | |   \   | |        | |      Style personnalisé
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Answer 1

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

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

Mise à jour

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

Vérifiez 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 & Phonegap, les choses seront différentes. Puisqu'il n'y a pas de crochet API direct pour vérifier l'état du clavier, nous devons écrire notre propre plugin dans Phonegap.

Sur Android, vous pouvez vérifier l'état d'affichage/masquage du clavier en utilisant du code natif [vérifiez ici]. et devez écrire un plugin Phonegap pour obtenir ces événements dans notre HTML.

[Phonegap est un exemple. Je pense que la plupart des frameworks HTML vers natif ont ce type de faciliter de se connecter avec du 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 shrink et réduire les tailles des éléments. Vérifiez le lien suivant.

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

Answer 2

Have JavaScript apply a class to the body when an input element has focus.

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

And then use @media queries to determine if mobile view:

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

The combination will let you stylize the page when the keyboard is up, on mobile. Thank you.

Have JavaScript apply a class to the body when an input element has focus.

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

And then use @media queries to determine if mobile view:

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

The combination will let you stylize the page when the keyboard is up, on mobile. Thank you.

Answer 3

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

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">');
}

Answer 4

Dans mon cas, cela ne fonctionnait qu'avec Chrome sur Android. Sur Firefox et même sur Samsung Internet, tout se passait bien (Wow). J'ai finalement trouvé cet article publié il y a un mois par l'équipe Chrome https://developer.chrome.com/blog/viewport-resize-behavior/. Et après avoir ajouté ce Cela a commencé à fonctionner.

Answer 5

J'ai exactement le même problème. Voici ma solution jusqu'à présent, j'apprécierais si quelqu'un pouvait 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 visible de la manière suivante : Au chargement je calcule une variable "sumedges", qui est $(window).width() + $(window).height(). Ensuite, lors de l'événement $(window).resize() je compare : Si la somme $(window).width() + $(window).height() est devenue plus petite que "sumedges", cela signifie que le clavier est visible. Cela fonctionne ici sur Chrome sur Android. Vous pouvez facilement ajuster 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("clavier visible");
  } else {
    $("#display").html("clavier caché");
  }
});

En utilisant jQuery, je n'ai trouvé aucun moyen de forcer une transition en douceur lorsque vous cliquez sur un champ de saisie et que le clavier apparaît. Mais il est peut-être possible de tromper le système : Dans la fiddle, j'ai mis en place un faux champ de saisie (bleu). Lorsque vous cliquez dessus, le vrai champ de saisie apparaît juste en dessous de mon affichage (jaune) et est sélectionné. De cette façon, tout semble fluide ici sur Chrome sur Android. Encore une fois, j'apprécierais si vous pouviez tester.

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

$("#realinput input").blur(function(){
    $("#realinput").hide();
});