iOS7 Détecter la hauteur du clavier avec le Javascript?

Maintenant, ce problème a fait avant (Quelle est la hauteur de l'iPad à l'écran du clavier?), mais je pense qu'il a besoin d'un rappel en raison d'iOS7 récemment libérés.

La question:
J'ai une position fixe modale qui s'affiche dans le coin inférieur droit de la page. Il a un seul champ de formulaire qui obtient le focus lorsque l'modale s'ouvre. L'accent déclenche la softkeyboard pour l'ouvrir. Le problème est que je veux en programmant détecter la hauteur du clavier pour positionner le modal en haut du clavier, sinon une partie de l'modal obtient de coupure de vue.

Ce que j'ai essayé: 

    var scrollHere = currentWidget.offset().top;
    //this scrolls the page to the top of the widget, but the keyboard is below.
    setTimeout(function() {
        $('html, body').scrollTop(scrollHere);
    }, 0);

La page défile vers le haut de la modale. Pas idéal parce que, parfois, le champ de formulaire est caché sous le clavier.

J'ai aussi essayé d'alerte de la fenêtre.innerHeight

    alert(window.innerHeight);

Mais qui montre jusqu'à être le même si le clavier est visible.

Donc ma question est, est-ce quelqu'un a trouvé un moyen de détecter le iOS7 de la hauteur du clavier en JavaScript? Y aurait-il une solution de contournement? Peu probable, mais cela pourrait-il être un bug dans iOS7 safari?

Toute aide serait appréciée. Merci.

InformationsquelleAutor zairon87 | 2013-10-02
  1. 9

    Donc la réponse est, j'ai eu tort de ne pas être en mesure de détecter la fenêtre.innerHeight changement.

    La raison pour laquelle je ne pouvais pas détecter le changement était parce que sur l'iPad, le clavier anime le haut depuis le bas et ne se déclenche pas une fenêtre de l'événement de redimensionnement. Ma solution a été de ne pas détecter la taille de la fenêtre, j'ai fait le corps ont un max-height de 100% lorsque le modal est ouvert. Puis-je attendre pour l'utilisateur de se concentrer sur le champ de texte et de manipuler la position de défilement à ce point:

    $(document.body).on('focus', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top - 100);
    }, 0);
});

    C'est pour quand vous vous concentrez sur votre champ de saisie. iOS aime essayer de centrer la fenêtre sur le terrain au moment de l'ouverture du clavier, et qui peut être gênant si vous avez des informations au-dessus de l'entrée de l'utilisateur a besoin de voir. L'exemple ci-dessus fait défiler la fenêtre, de sorte que mon champ de texte est à droite au-dessus du clavier. Vous pensez que tout ce que vous devez faire, mais iOS essaie parfois d'être trop intelligent.
    Lorsque l'utilisateur commence à taper dans l'entrée, il re-centres sur l'entrée de nouveau! Donc, nous prenons le code ci-dessus et d'en faire ceci:

    $(document.body).on('focus keyup', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top - 100);
    }, 0);
});

    De cette façon, la position de défilement ne change jamais d'où vous le voulez pendant que l'utilisateur est en train de taper.

    Note: La seule fois où j'ai été en mesure de détecter le changement de la fenêtre.innerHeight était dans l'événement keyup parce que à ce moment que le clavier était fait de l'animation et entièrement affichée sur la page. Sur le focus, il dit encore le innerHeight était le même que sans le clavier.

    • Hey @zairon87, j'ai un problème similaire où je veux en position d'une zone de texte en haut du clavier, est-ce vraiment résoudre le problème de frappe pour vous sur le périphérique? J'ai été en mesure de traiter que le scintillement lors de la frappe sur le simulateur, mais incapable de le faire fonctionner même avec votre solution sur le périphérique réel (je suis avec un iPhone 5 à la place de l'iPad). Toutes les suggestions?
    • Zairon, je n'arrive toujours pas à comprendre cette chose. Après le clavier est ouvert, je suis à l'aide des touches de détecter la hauteur de la fenêtre, et je suis encore en train de pleine hauteur. Avez-vous réussi à le résoudre effectivement cela?
    InformationsquelleAutor zairon87