l'écran style lorsque le clavier virtuel est actif
idéalement, je voudrais que l'interface entière ait un style personnalisé qui est vu sur l'ios (itouch / ipad) ou équivalent android avec le clavier virtuel présent. Voir ci-dessous pour plus de détails.
un ensemble personnalisé de règles de piratage CSS pour être actif, lorsque le clavier est" présent", est également une solution acceptable.
cible androïdes et ios, sur un site Web (HTML / JavaScript/CSS) Notez également que la disposition à l'intérieur est: "fluide".
Edit: C'était plus design, puis texte; donc les changements ne sont pas désorientants. Au niveau le plus bas, je souhaite juste un changement de design avec et sans les touches virtuelles (peut-être juste un changement de fond).
La question, c'est une bonne ou une mauvaise idée de conception, est discutable. Cependant, je pense, est sans pertinence pour la question. Pour un tel exploit peut utiliser plus que du texte (comme des jeux ou des médias interactifs).
D'où le bounty: bien que n'ayant plus besoin de réponse pour le projet sur lequel je travaillais (une conception alternative a été utilisée). Je pense toujours qu'il peut être utile de répondre à cette question.
Comportement Par Défaut
+--------+
| |
+------------+ +-+-hidden-+-+ <- ~50% hidden
| +--------+ | | +--------+ |
| | | | | |visible | |
| | | | | | | | <- ~50% visible
| | 100% | | ==> | +--------+ |
| | | | / | |virtual | |
| | | | | | keys | |
| +--------+ | | +--------+ |
+------------+ +------------+
Comportement Désiré
+------------+ +------------+
| +--------+ | | +--------+ |
| | | | | |visible | | <- 100% visible (example styling)
| | | | | | | | Custom Styling
| | 100% | | ==> | +--------+ |
| | | | / | |virtual | |
| | | | | | keys | |
| +--------+ | | +--------+ |
+------------+ +------------+
4 réponses
je ne suis pas sûr, est-ce l'effet désiré?. voir ce lien
mise à Jour
(1). En supposant que c'est un site web et en cours d'exécution sur le navigateur de périphérique. Ensuite, nous pouvons vérifier la présence d'un clavier virtuel en vérifiant la taille de l'écran.
Vérifier dans le navigateur de votre appareil, - http://jsfiddle.net/UHdCw/8/show/
code: - http://jsfiddle.net/UHdCw/8 /
(2). Si vous construisez natif app avec HTML5 & Phonegap, les choses seront différentes. Comme il n'y a pas de crochet D'API direct pour vérifier l'état des claviers, nous devons écrire notre propre plugin dans Phonegap.
dans Android, vous pouvez vérifier l'état show/hide du clavier en utilisant le code natif [ vérifier ici ]. et ont pour Ecrire le plugin Phonegap pour obtenir ces événements dans notre HTML.
[Phonegap en est un exemple. Je pense que la plupart des cadres html à natif ont ce genre de felicity à accrocher avec le code natif]
mise à jour d'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, quand input obtient la mise au point nous pouvons ajouter la classe de rétrécissement et de réduire les tailles des éléments. Vérifier le lien suivant.
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>
ont JavaScript appliquer une classe au 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'); });
puis utiliser @media requêtes pour déterminer si mobile view:
@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. Remercier.
j'ai le problème exact. Voici ma solution pour L'instant, 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 )
I détecter s'ils clavier est sorti de la manière suivante: lors du chargement, Je calcule une variable" sumedges", qui est $(Fenêtre).width () + $(window).hauteur.)( Puis, dans le cas de $(window).redimensionner () je compare: si la somme $(fenêtre).width () + $(window).hauteur() est devenu plus petit que "sumedges", cela signifie que le clavier est. 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");
}
});
en utilisant jQuery, je n'ai trouvé aucun moyen de forcer une transition en douceur lorsque vous cliquez sur une entrée et que le clavier s'ouvre. mais il est peut-être possible de tromper le système: dans le violon, je mettre en place un faux de saisie (bleu). Lorsque vous cliquez dessus, l'entrée réelle apparaît juste au-dessous de mon affichage (jaune) et est sélectionnée. De cette façon, tout semble lisse 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();
});