tabIndex屬性和AJAX

Question

我已經看到了一些有關tabIndex問題的帖子，但找不到以下需要修復的情況。

因此，這是該項目的重點。 這是一個使用AJAX 1.0擴展和jQuery的ASP.NET 2.0 Web應用程序。 我正在尋找來自任何編程語言的任何想法來處理這種情況。

所以首先，我知道如何設置tabIndex，無論它是硬編碼還是在用戶控件中自動生成。 我的問題是，如果您有一個使用AJAX的復合控件（例如網格控件），並且為所有表單條目元素（包括AJAX網格控件中的可見行）設置了tabIndex屬性，該怎么辦。 例如，如果我通過AJAX向網格中添加新行，則制表符排序會怎樣？

以下是制表符順序，而不是HTML中元素的順序：

初始頁面加載

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
Input 3, tab index 6
etc.

現在通過AJAX，我向網格添加了新行

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
|-- Row 2 (loaded via AJAX)
     |-- Cell 1, tab index ?
     |-- Cell 2, tab index ?
Input 3, tab index 6
etc.

現在，根據我的理解，tabIndex屬性的默認值是-1，以便所有不具有該屬性的元素都按其出現在文檔對​​象模型樹中的順序進行制表，如果任何元素的tabIndex屬性值> 0，則該元素出現在文檔對​​象模型樹中。第2行的單元格的tabIndex值將為-1。 因此，瀏覽我的表單將是這樣的：

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
Input 3, tab index 6

|-- Row 2 (loaded via AJAX)
     |-- Cell 1, tab index 7 (7 because of default -1 value behavior)
     |-- Cell 2, tab index 8 (8 because of default -1 value behavior)

我看了一些jQuery插件，但沒有一個可以處理我想做的事情（或者至少我不認為它們可以做）。 我簽出了jQuery Tabindex插件和jQuery Field插件（v0.9.2）。

我的想法：

-循環瀏覽客戶端的表單元素以重置所有tabIndex值。 如果您希望元素在表單中出現時的順序，則此方法有效，但這可能很慢，並且很可能導致頁面在加載時出現打ic。 同樣，如果要按順序顯示在表單中，為什么還要使用tabIndex？ 沒有它的元素將為tabIndex = -1，並且將按照它們在HTML中出現的順序進行制表。

-對於復合控件，請指定保留的tabIndex范圍，因此當我在第1行的單元格中擊中網格時，一個tabIndex為4，我說網格之后的下一個控件將是，例如tabIndex = 500，這樣我就可以保留其他tabIndex值當我通過AJAX添加新行時。

-您的想法在這里。

Answer 1

盡管這不是您問題的答案，但我認為這值得一提。 據我所知，-1不是tabindex的默認值，將tabIndex設置為-1意味着您無法在幾乎所有現代瀏覽器（包括IE）中切換到該元素。 如果您在任何測試場景中都假定這樣做，這可能會非常令人困惑。

Answer 2

實際上，在您的情況下，解決方案將非常簡單。 只需將所有表單輸入和動態輸入設置為“ 1”即可。 它將根據相對順序在所有1中進行制表。 唯一的問題是我認為瀏覽器會在文檔加載時設置標簽索引，因此Ajax元素可能永遠不會進入標簽順序。