Jak wykryć klawiatury pokaż/ukryj zdarzenie w jQuery dla mobilnych aplikacji internetowych

Question

pracuję nad internetowej bazy komórkowego (HTML) application.Is istnieje sposób
wykryć zdarzenie klawiatury jak wtedy, gdy klawiatura jest widoczny i klawiatura hide, podstawa na tym, że mogę kontrolować inny układ ekranu. Próbowałem fokus, rozmycie, zmiana rozmiaru przeglądarki, ale mój problem nie rozwiązał 100%, więc szukam tylko zdarzenia klawiatury, rzeczywiście chcę ukryć stopkę nad klawiaturą, gdy klawiatura jest widoczna jak to (stopka) pojawiają się na klawiaturze, więc próbuję ustawić stopkę względną pozycję, gdy klawiatura jest widoczna, a pozycja stopki jako naprawiona, gdy klawiatura schowa się. Próbowałem jak poniżej działa, ale to nie może być 100% rozdzielczość z
mój problem. $ (document) .ready (function() {

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

});  

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

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

});

Czy ktoś może mi pomóc jak rozwiązać problem, stopki lub daj mi znać, jeśli nie jest zdarzenie klawiatury w jQuery

Answer 1

Można użyć rozmiaru zdarzenia dostać jeśli klawiatura jest wyświetlana lub nie

$(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

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; 

}); 

Zauważ, że okno resiz Zdarzenie (i tym samym blok komentarza "Klawiatura zamknięta") może zostać wywołane kilka razy, gdy animacja klawiatury zostanie zamknięta. Edycja dostosowana do Twoich potrzeb.

Answer 4

Witam oto jedno z rozwiązań, które sprawdziły się, czy klawiatura jest aktywna na urządzeniach mobilnych.

W poniższym kodzie "#Email" jest id pola wejściowego, którego używam.

$(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

Najbardziej rozwiązanie kula prof który działa na Chrome/Safari itp .. a zarówno Androida i iOS, jak 20-Nov-2017 będzie wykrywać zmianę wysokości div, który ma VH jednostki wysokości (wysokość rzutni)

Następnie przy każdej zmianie rozmycia/ogniskowania pola wejściowego/tekstowego należy sprawdzić, czy element div ma teraz wysokość o 30% mniejszą (w pikselach) niż przed zdarzeniem "rozmycie/fokus".

Zobacz kod tutaj: Detect virtual keyboard vs. hardware keyboard (jej nie wolno kopiować kod pasty podobno) Detect klawiatury wirtualnej klawiatury sprzętowej vs.