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

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

我剛剛修復了 kirisu_kun 使用 prop() 而不是 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 3

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

Answer 4

這個問題依賴於有一種可靠的方法來檢測屏幕鍵盤何時在移動設備上出現（或消失）。 不幸的是，沒有可靠的方法來檢測這一點。 類似的問題已經多次出現在 SO 上，並提出了各種技巧、技巧和解決方法（請參閱此答案以獲取指向多個相關答案線程的鏈接）。

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

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

Answer 5

與之前的答案類似，但針對所有具有焦點的表單子項（顯然，如果沒有表單父項，輸入將失敗）

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

我一直在尋找類似問題的解決方案。 當 url 輸入進出視圖時，我的調整大小事件被觸發。 這是我一直在努力的事情......有可能的解決方案嗎？

所以基本上你只檢查屏幕的寬度是否已經改變，如果不同，則只在調整大小時觸發你的功能：

例如：

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 7

有幾件事你需要集中注意力

1. 所有軟鍵盤只影響高度而不影響寬度。
2. 焦點元素標簽可以是 input 或 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 8

在當前版本的 chrome webview 中工作正常。 我剛剛使用以下代碼在 Angular 中實現了窗口大小調整功能。

@HostListener('window:resize', ['$event'])
  onResize(event) {
  // Do you handling here.
}

注意：同樣可以通過使用來實現

 window.addEventListener('resize', () => {
   // Do handling here
 });