Comment détecter le clavier afficher/ masquer l'événement en jquery pour l'application web mobile

Je suis en train de travailler sur la base de web mobile(HTML) de l'application.Est-il possible d'
détecter l'événement de clavier comme lorsque le clavier est visible et le clavier se cacher,
base sur que je peux contrôler tout autre écran de mise en page. J'ai essayé de concentrer, flou ,
navigateur de l'événement de redimensionnement, mais mon problème n'ont pas résoudre à 100% , donc je
suis à la recherche de l'événement de clavier ,
en fait, je veux masquer le pied de page sur le clavier lorsque le clavier est visible
comme il(pied de page) apparaissent sur le clavier, donc je suis en train de mettre le pied de page
la position relative lorsque le clavier est visible et le pied de page de la position que
fixe lorsque le clavier va se cacher.
j'ai essayé comme ci-dessous ce travail, mais qui ne pouvait pas être à 100% résolution de
mon problème .
$(document).ready(function () {

$("input").focus(function() {
 $(".copyright_link").css("position","relative");   

 });       

$("input").blur(function() {

 $(".copyright_link").css("position","fixed");  
});

});

Quelqu'un peut m'aider comment faire pour résoudre les problème de pied de page ou laissez-moi savoir si il y
est l'événement de clavier en jquery

Juge avec $(document.activeElement).attr('type') === 'text'. Visées stackoverflow.com/questions/14902321/...

OriginalL'auteur Nitin Gite | 2015-02-02

  1. 11

    Vous pouvez utiliser l'événement de redimensionnement pour obtenir si le clavier est figurant ou non

    $(document).ready(function(){
  var _originalSize = $(window).width() + $(window).height()
  $(window).resize(function(){
    if($(window).width() + $(window).height() != _originalSize){
      console.log("keyboard show up");
      $(".copyright_link").css("position","relative");  
    }else{
      console.log("keyboard closed");
      $(".copyright_link").css("position","fixed");  
    }
  });
});
    Grâce à son travail 🙂
    Il ne fonctionne que dans le cas où si je n'ai pas faites pivoter l'appareil mode portrait au mode paysage et vice-versa. parce var _originalSize = $(window).width() + $(window).height() ; différer dans le paysage & portrait mode ,de sorte que son déclenchement inutile de position de pied de page comme par code ci-dessus. donc maintenant, je suppose, à la recherche de l'événement de clavier ..est-il??
    essayez quelque chose comme $(window).width() + $(window).hauteur() < _originalSize - 50 pour l'éviter.ce qui est plus grand que l'écart entre le mode paysage et le mode portrait et plus petite que la hauteur du clavier.
    Ce qui est sur la barre d'adresse des navigateurs mobiles? Certains navigateurs cacher sur de défilement et de la fenêtre d'affichage de la hauteur de changements

    OriginalL'auteur suish

  2. 8
    if($(document.activeElement).attr('type') == "text"){
    console.log("Keyboard is visible");
}else{
    console.log("Keyboard is not visible");  
}
    Sur android, vous pouvez cacher le clavier en appuyant sur le triangle ('cacher le clavier bouton"). L'entrée sera de rester actif.

    OriginalL'auteur Alfaz Jikani

  3. 5

    À l'aide de jQuery:

    var lastWindowWidth = $(window).width(),
    lastWindowHeight = $(window).height();

$(window).resize(function() {

    var newWindowWidth = $(window).width(),
        newWindowHeight = $(window).height();

    if( newWindowHeight > lastWindowHeight && newWindowWidth == lastWindowWidth ) {

        //Keyboard closed
        //...

    }

    lastWindowWidth = newWindowWidth;
    lastWindowHeight = newWindowHeight;

});

    Noter que la fenêtre de l'événement de redimensionnement (et donc le "Clavier fermé" bloc de commentaire) peut être appelé plusieurs fois que le clavier anime fermé. Modifier pour l'adapter à vos besoins.

    OriginalL'auteur Dan

  4. 0

    Salut voici une solution qui a fonctionné pour moi de vérifier si le clavier est actif dans les appareils mobiles.

    Dans le code ci-dessous "#Email" est l'id du champ de saisie je suis à l'aide.

       $(window).resize(function () { //checking for window resize event

    if($(window).width() < 414){ //checking for window width
         if($("#Email").is(":focus")){
             $('.content').css({'margin-top': -15 + 'px'});
             $('.footer').css({'margin-bottom': -100 + 'px'});
         }
    }});

    OriginalL'auteur vikas etagi

  5. 0

    Le plus de balle prof solution qui fonctionne sur google Chrome/Safari, etc.. et à la fois sur Android et iOS: 20-nov-2017 sera de détecter une variation de la hauteur d'un div qui a un vh unités de hauteur (hauteur de la fenêtre d'affichage)

    Puis sur tout flou/changement de focus d'un input/textarea vérifier si cette div maintenant a une hauteur de 30% de moins (en pixels) qu'elle ne l'habitude d'avoir avant que l'effet de flou/événements de focus.

    Voir le code ici: Détecter clavier virtuel vs clavier matériel
    (il n'est pas permis de copier coller le code apparemment) Détecte le clavier virtuel vs clavier matériel

    OriginalL'auteur TBE