Jak ustalić, czy zdarzenie zmiany rozmiaru zostało wywołane przez klawiaturę programową w przeglądarce mobilnej?

Question

Istnieje wiele dyskusji na temat miękkiej klawiatury, ale nie znalazłem jeszcze dobrego rozwiązania dla mojego problemu.

Mam funkcja Resize jak:

$(window).resize(function() { 
    ///do stuff 
}); 

chcę zrobić „rzeczy” w tej funkcji na wszystkich rozmiaru zdarzenia z wyjątkiem gdy jest spowodowany przez miękkiej klawiatury. Jak ustalić, czy miękka klawiatura spowodowała zmianę rozmiaru?

Answer 1

Niedawno napotkano na pewne problemy, które wymagały sprawdzenia. Udało mi się go rozwiązać tak:

$(window).on('resize', function(){ 
    // If the current active element is a text input, we can assume the soft keyboard is visible. 
    if($(document.activeElement).attr('type') === 'text') { 
     // Logic for while keyboard is shown 
    } else { 
     // Logic for while keyboard is hidden 
    } 
} 

Potrzebowałem tylko go dla wejść tekstowych, ale oczywiście to może być rozszerzona dla każdego rodzaju elementu, który mógłby wywołać klawiaturę/numer kompletacji itp

Answer 2

Podobne do poprzedniej odpowiedzi, ale cele wszystkie dzieci w formie, z naciskiem (oczywiście, to nie na wejściach bez formy rodzica)

$(window).resize(function() { 
    if($('form *').focus()) { 
     alert('ignore this'); 
    } else { 
     // do the thing 
    } 
}); 

Więc może ten ...

$(window).resize(function() { 
    if($('input, select, etc').focus()) { 
     alert('ignore this'); 
    } else { 
     // do the thing 
    } 
}); 

Answer 3

Problem polega na tym, że jeśli aktywny element jest skupiony, można wywołać zdarzenie zmiany rozmiaru tylko przez zamknięcie klawiatury bez zmiany ostrości .. tak, klawiatura zostanie ukryta, ale kod wejdzie w stan skupienia.

Answer 4

Szukałem rozwiązania podobnego problemu. Moje zdarzenie resize było wyzwalane, gdy wejście URL-a pojawiło się i zniknęło z widoku. To jest coś, nad czym pracowałem ... Czy możliwe jest rozwiązanie?

Więc w zasadzie po prostu sprawdzić, czy szerokość ekranu sam się zmienił, czy nie, a jedynie odpalić swoje funkcje na zmiany rozmiaru jeśli jest inaczej:

np

var saveWindowWidth = true; 
    var savedWindowWidth; 

//set the initial window width 
    if (saveWindowWidth = true){ 
     savedWindowWidth = windowWidth; 
     saveWindowWidth = false; 
    } 


//then on resize... 


$(window).resize(function() { 

//if the screen has resized then the window width variable will update 
     windowWidth = window.innerWidth; 


//if the saved window width is still equal to the current window width do nothing 
     if (savedWindowWidth == windowWidth){ 
      return; 
     } 


//if saved window width not equal to the current window width do something 
     if(savedWindowWidth != windowWidth) { 
      // do something 

      savedWindowWidth = windowWidth; 
     } 

    }); 

Answer 5

mam tylko odpowiedź stałych kirisu_kun do korzystania rekwizyt() zamiast attr():

$(window).on('resize', function(){ 
    // If the current active element is a text input, we can assume the soft keyboard is visible. 
    if($(document.activeElement).prop('type') === 'text') { 
     // Logic for while keyboard is shown 
    } else { 
     // Logic for while keyboard is hidden 
    } 
} 

Answer 6

Istnieje kilka rzeczy u należy skoncentrować o

1. Wszystkie miękkie klawiatury wpływają tylko na wysokość, a nie na szerokość.
2. Znaczniki elementów fokusowych mogą być tekstem wejściowym lub tekstowym.
3. Wysokość zostanie zmniejszona, gdy element się skupi (lub) wysokość wzrośnie po wyregulowaniu.

Można użyć tych kombinacji, gdy przeglądarka pobiera zmieniany

function getWidth(){ 
return $(window).width(); 
} 

function getHeight(){ 
return $(window).height(); 
} 

function isFocus(){ 
return $(document.activeElement).prop('tagName')=='INPUT' || $(document.activeElement).prop('tagName')=='TEXTAREA'; 
} 

var focused = false; 
var windowWidth=getWidth(),windowHeight=getHeight(); 

//then on resize...  
$(window).resize(function() { 

var tWidth=getWidth(),tHeight=getHeight(),tfocused=isFocus(); 

//if the saved window width is still equal to the current window width do nothing 
if (windowWidth == tWidth && ((tHeight < windowHeight && !focused && tfocused) || (tHeight > windowHeight && focused && !tfocused))){ 
windowWidth=tWidth; 
windowHeight=tHeight; 
focused=tfocused; 
return; 
} 
else{ 
windowWidth=tWidth; 
windowHeight=tHeight; 
focused=tfocused; 

//Your Code Here 

} 
}); 

Answer 7

to pytanie zależy od istnienia niezawodny sposób, aby wykryć, kiedy pojawi się klawiatura ekranowa (lub zniknie) na urządzeniach mobilnych. Niestety nie ma niezawodnego sposobu na wykrycie tego. Podobne pytania pojawiły się kilka razy na SO, z różnymi sztuczkami, sztuczkami i obejściami sugerowanymi (patrz this answer w przypadku linków do kilku istotnych wątków odpowiedzi).

Należy również pamiętać, że zdarzenie zmiany rozmiaru nie zawsze jest wyzwalane po wyświetleniu klawiatury ekranowej (patrz this answer).

Moja ogólna sugestia to wykrycie obecności ekranu dotykowego + wykrywanie, czy aktywny element jest typu, który wyzwala klawiaturę ekranową (coś podobnego do this answer). Jednak takie podejście nadal może się nie udać w przypadku hybrydowych urządzeń Windows (takich jak Surface Pro), w których czasami może być obecna klawiatura ekranowa podczas zmiany rozmiaru przeglądarki, a czasami klawiatura sprzętowa może być używana przy zmianie rozmiaru przeglądarki.