jQuery UI對話框如何禁用焦點背景輸入？

當您使用jQuery UI打開模式對話框時，您會注意到，如果使用Tab鍵，您可以將焦點放在對話框的按鈕上，但對話框外的任何輸入都會被忽略。我試圖用jQuery UI Tools Overlay來實現這種相同的行爲，但我不確定jQuery UI是如何做到的。它似乎沒有將元素的標籤索引設置爲-1，此外，這樣做會非常繁瑣，因爲它會涉及找到不屬於對話框的所有可聚焦元素。如果你需要自動化，這不會很好。有沒有一種方法可以禁用焦點除了少數幾個頁面的所有元素？jQuery UI對話框如何禁用焦點背景輸入？

來源

2012-10-17 JayPea

對話框小部件實際上處理keypress事件並執行其自己的選項卡關鍵處理。此處理忽略對話框外的可放置元素。

相關的源代碼（線路中的current version at the time of this post 286至305）是：

// prevent tabbing out of modal dialogs 
if (options.modal) { 
    uiDialog.bind('keypress.ui-dialog', function(event) { 
     if (event.keyCode !== $.ui.keyCode.TAB) { 
      return; 
     } 

     var tabbables = $(':tabbable', this), 
      first = tabbables.filter(':first'), 
      last = tabbables.filter(':last'); 

     if (event.target === last[0] && !event.shiftKey) { 
      first.focus(1); 
      return false; 
     } else if (event.target === first[0] && event.shiftKey) { 
      last.focus(1); 
      return false; 
     } 
    }); 
}

注意TrueBlueAussie的評論是正確的，並用來綁定到錯誤的事件的對話框控件的釋放。應該使用的keypress：

uiDialog.bind('keydown.ui-dialog', function(event) { 
    // ... 
});

來源

2012-10-17 15:04:26

是啊，它看起來有點難以模仿，但是這就是我一直在尋找。謝謝 – JayPea

請注意，如果這是一個小問題，或者您引用的來源與j08691同一日期的答案不同，但要做到這一點，tab-key處理需要'keydown'，而不是'keypress'。 'keypress'太晚了（或者根本沒有開啓標籤）。 –

@TrueBlueAussie，絕對不是miscopy（我跟蹤了原始來源[有]（https://github.com/jquery/jquery-ui/blob/1.8/ui/jquery.ui.dialog.js）），但我可能複製粘貼了一個錯誤，是的:)我會修復鏈接和錯誤。 –

這裏是代碼處理此塊：

// prevent tabbing out of modal dialogs 
this._on(uiDialog, { 
    keydown: function(event) { 
     if (!options.modal || event.keyCode !== $.ui.keyCode.TAB) { 
      return; 
     } 
     var tabbables = $(":tabbable", uiDialog), 
      first = tabbables.filter(":first"), 
      last = tabbables.filter(":last"); 
     if (event.target === last[0] && !event.shiftKey) { 
      first.focus(1); 
      return false; 
     } else if (event.target === first[0] && event.shiftKey) { 
      last.focus(1); 
      return false; 
     } 
    } 
});

它看起來像jQuery UI添加了一個過濾器（:tabbable）對jQuery選擇器引擎和當對話框處於活動狀態，它只允許選項卡在模態的可放置元素之間循環。

代碼來自：https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

來源

2012-10-17 15:04:49 j08691

從今天開始'keydown'是正確的。 'FrédéricHamidi'的答案使用'keypress'並且不會觸發'tab'鍵。 +1 –

jQuery UI對話框如何禁用焦點背景輸入？

回答

相關問題