如何確定調整大小事件是否由移動瀏覽器中的軟鍵盤觸發？

Question

關於軟鍵盤有很多討論，但我還沒有找到一個好的解決方案，我的問題呢。

我有這樣一個調整大小功能：

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

我想做的事情在該功能的「東西」在所有的調整大小除非它是通過軟鍵盤觸發事件。我怎樣才能確定軟鍵盤是否觸發了調整大小？

Answer 1

我最近遇到了一些需要檢查的問題。我設法解決它像這樣：

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

我只需要它的文本輸入，但顯然這可以爲任何一種元素可能觸發軟鍵盤/數字選擇器等

Answer 2

類似擴大以前的答案，但目標與重點表格的所有孩子（顯然，將在輸入失敗，沒有一個形式母）

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

所以，也許這一個...

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

Answer 3

問題是，如果活動元素被聚焦，您可以通過關閉鍵盤而不改變焦點來觸發調整大小事件。因此，鍵盤將隱藏，但代碼將進入焦點狀態。

Answer 4

我一直在尋找類似問題的解決方案。當url輸入進入和退出視圖時，我的resize事件觸發。這是我一直在努力...可能有一個可能的解決方案？

所以基本上你只是檢查屏幕的寬度單獨有變化，只有解僱你的功能上的調整大小，如果它是不同的：

如：

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

我已經只是固定kirisu_kun的答案，使用道具（）代替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

有幾件事情ü需要集中約

1. 所有軟鍵盤隻影響高度而不影響寬度。
2. 焦點元素標記可以是輸入或textarea。
3. 元素聚焦時高度會減小（或）聚焦時高度會增加。

當瀏覽器被調整

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

這個問題依賴於有是出現在屏幕上的鍵盤（或消失）在移動設備上檢測到一個可靠的方法可以使用這些組合。不幸的是，沒有可靠的方法來檢測這一點。 SO上也出現過類似的問題，並提出了各種竅門，技巧和解決方法（請參閱this answer以獲取多個相關答案主題的鏈接）。

另請注意，出現屏幕鍵盤時並不總是觸發調整大小事件（請參閱this answer）。

我的一般的建議是檢測觸摸屏+的有源元件是否是觸發屏幕上鍵盤（類似於this answer東西）的類型的檢測的存在。但是，對於混合型Windows設備（例如Surface Pro），這種方法仍然會失敗，其中屏幕鍵盤有時可能會出現在瀏覽器大小調整中，有時硬件鍵盤可能正在瀏覽器大小調整中使用。