Wie Tastatur anzeigen/ausblenden Veranstaltung in jquery für mobile Web-Anwendung

Question

Ich arbeite an Web-Basis mobil (HTML) application.Is es eine Möglichkeit,
erkennen Tastaturereignis wie wenn Tastatur sichtbar und Tastatur auszublenden, Basis erfassen auf diesem kann ich anderes Bildschirmlayout steuern. Ich versuchte Fokus, Unschärfe, Browser Resize Event, aber mein Problem habe nicht 100% aufgelöst, so dass ich bin nur für Tastaturereignis suchen, eigentlich möchte ich Fußzeile über Tastatur zu verbergen, wenn die Tastatur sichtbar ist als es (Fußzeile) erscheinen Die Tastatur, so versuche ich Fußzeile Position relativ zu setzen, wenn die Tastatur sichtbar ist und Fußzeile Position wie behoben, wenn die Tastatur verschwindet. Ich versuchte, wie unten funktioniert es, aber das konnte nicht die 100% ige Auflösung von
mein Problem sein. $ (document) .ready (function() {

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

});  

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

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

});

Kann mir jemand helfen, wie Fußzeile Problem zu lösen oder lassen Sie mich wissen, ob es Tastaturereignis in jquery ist

Answer 1

können Sie Ereignis die Größe verwenden zu bekommen, wenn Tastatur erscheint, ist oder nicht

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

Answer 2

if($(document.activeElement).attr('type') == "text"){ 
    console.log("Keyboard is visible"); 
}else{ 
    console.log("Keyboard is not visible"); 
} 

Answer 3

Mit 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; 

}); 

Beachten Sie, dass das Fenster resiz Das Ereignis (und somit der Kommentarblock "Tastatur geschlossen") kann mehrmals aufgerufen werden, wenn die Tastatur geschlossen wird. Bearbeiten Sie nach Ihren Bedürfnissen.

Answer 4

Hallo hier ist eine der Lösung, die für mich funktionierte, um zu überprüfen, ob die Tastatur in mobilen Geräten aktiv ist.

Im folgenden Code ist "#Email" die ID des Eingabefeldes, das ich verwende.

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

Answer 5

Die Kugel prof-Lösung, die über Chrome/Safari etc .. arbeitet und sowohl auf Android und iOS als 20-nov-2017 eine Änderung in der Höhe eines div zu erkennen, die eine vh hat height units (Höhe des Darstellungsbereichs)

Dann überprüfen Sie bei jeder Unschärfe/Fokusänderung eines Eingabe-/Textbereichs, ob das div jetzt eine Höhe von 30% weniger (in Pixeln) als vor diesem Blur/Fokus-Ereignis hat.

Siehe den Code hier: Detect virtual keyboard vs. hardware keyboard (es ist nicht erlaubt Paste Code offenbar zu kopieren) Detect virtuelle Tastatur gegen Hardware-Tastatur