J'ai un problème avec un élément div pour coller au bas de mon application Web lorsque le clavier virtuel ios 7 apparaît après avoir appuyé sur une zone de texte.
J'ai cet élément div:
....
<div id="footer" style="text-align:center">
<div id="idName"><img alt="SomeName" src="images/logo.png" /></div>
</div>
</form>
</body>
Il utilise ce style
#footer{
color:#CCC;
height: 48px;
position:fixed;
z-index:5;
bottom:0px;
width:100%;
padding-left:2px;
padding-right:2px;
padding:0;
border-top:1px solid #444;
background:#222; /* Old browsers */
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background: -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */
background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */
background: linear-gradient(top, #999, #666 2%, #222); /* W3C */
}
Et lorsque j'appuie sur la zone de texte, l'élément de pied de page saute au-dessus du clavier virtuel ... Il fonctionnait jadis lorsque iDevices était exécuté sur des versions antérieures à iOS 7.
Sur le côté gauche est avant d'appuyer sur la zone de texte et sur le côté droit est après avoir appuyé sur la zone de texte.
Le pied de page saute au-dessus du clavier virtuel.
METTRE À JOUR:
J'ai changé la méta-balise fournie par Opossum et le pied de page reste en bas:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0">-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>
<meta name="Apple-mobile-web-app-capable" content="yes" />
<meta name="Apple-mobile-web-app-status-bar-style" content="black" />
Extension
Ce n'est pas une partie de la question, mais le correctif visse les choses lorsque vous utilisez un Android:) Une solution pour cela?
Solution: suppression de l'échelle maximale et de la densité cible Dpi; elle fonctionne désormais à la fois pour IOS et Android. La méta-tag ressemble maintenant à ceci:
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
EDIT: D'accord, j'ai trouvé une autre solution possible. Vérifiez vos balises méta HTML pour quelque chose comme ça:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
Remplacez-le par ceci:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
Cela a résolu le problème pour moi. Je dois noter que mon application utilise Cordova cependant.
Une autre solution possible :
Si vous regardez dans config.xml (probablement sous le répertoire resources, vous devriez voir une ligne qui dit:
<preference name="KeyboardShrinksView" value="false" />
Si vous définissez ce paramètre sur true, les pieds de page ne pourront pas se déplacer au-dessus du clavier virtuel. Toutefois, cela entraîne parfois le clavier pour masquer le champ de texte saisi par l'utilisateur.
Il y a le coupable dans votre classe #footer
bottom:0px;
Si vous attribuez bottom
à un élément, lors de l'apparition du clavier virtuel, ces éléments se déplacent vers le haut dans iOS 7 . La solution consiste à utiliser la propriété top
.
Je suis un peu en retard mais ça marche bien:
var footer = $(".footer");
footer.css({ "top": footer.position().top, "bottom": "auto"});
Ceci suppose un élément fixe ou absolument positionné qui a en bas: un certain nombre à l’origine. Ajoutez ceci à l'endroit approprié dans vos scripts javascript (probablement sur une fonction appelée lors du chargement de la page). Cela utilise jQuery mais cela se traduit facilement par javascript. Cela oblige fondamentalement le pied de page à rester sur le bas, par rapport à la valeur 'top' au lieu de la valeur 'bottom'.
La réponse approuvée fonctionne, mais peut déranger certaines CSS, je dois donc utiliser autre chose. Ce n'est pas mon problème, mais je l'ai trouvé sur le internet et cela a fonctionné pour moi:
HTML:
<body onResize="onResize();">
JavaScript:
function onResize(){
var ios7 = (device.platform == 'iOS' && parseInt(device.version) >= 7);
if (ios7){
var height = $('body').height();
if (height < 350){ // adjust this height value conforms to your layout
$('.myBottomMenu').hide();
}
else {
$('.myBottomMenu').show();
}
}
}
Voici comment nous l'avons résolu: Cordova 2.9.0 . Solution 1. L'ajout de la balise méta de la fenêtre d'affichage a résolu dans une certaine mesure, mais pas complètement.
$(document).on('focus','input, select, textarea',function() {
if(OSName=== 'iOS' && ver[0] === 7){
if($(this).attr('readonly')===undefined){
$('#footer').hide()
}
}
});
$(document).on('blur','input, select, textarea',function(){
if(OSName=== 'iOS' && ver[0] === 7){
if($(this).attr('readonly')===undefined){
$('#footer').show();
}
}
});
où #footer est l'identifiant de la div qui tient le pied de page . Cela affichera la barre d'outils pendant un instant et le masquera, pour éviter ce scintillement, nous avons ajouté du code en natif,. Inscrivez-vous à l'événement keyboardshow dans votre MainViewcontroller.m Ajoutez ce qui suit dans la fonction init:
//fix for ios7 footer is scrolled up when the keyboard popsup.
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(keyboardWillShow:)
name:UIKeyboardWillShowNotification
object:nil];
2.ajouter la fonction suivante
-(void)keyboardWillShow:(NSNotification*)notification{
//call the javascript to hide the footer.
//fix for ios7 footer is scrolled along wiht the content when the keyboard comesup.
if (IsAtLeastiOSVersion(@"7.0")){
[self.webView stringByEvaluatingJavaScriptFromString:@"()"];
}
}
3.Dans le fichier js, ajoutez la fonction
//Fix for footer is misalligned when the virtual keyboard pops up ios7
//check for device is iPhone and os version is 7
function hideFooter(){
if(OSName=== 'iOS' && ver[0] === 7){
if($(this).attr('readonly')===undefined)
$('#footer').hide();
}
}
Faites-nous savoir si cette solution fonctionne pour u.
Dans mon cas, j'ai utilisé pour capturer l'événement lors de la saisie dans les champs de texte de saisie des événements et en masquant la barre inférieure
if($(event.target).hasClass("inputtextfield")){
$('.bottom_bar').hide();}
et capturer l'événement lorsque le clavier est fermé et afficher le clavier en utilisant
document.addEventListener('focusout', function(e) { $('.bottom_bar').show();});