2009-08-04 96 views
0

我見過一些關於tabIndex問題的文章,但是我找不到像我需要解決的下面的場景。tabIndex屬性和AJAX

所以這裏是項目的內幕。這是一個使用AJAX 1.0 Extensions和jQuery的ASP.NET 2.0 Web應用程序。我正在尋找任何編程語言的想法來處理這樣的情況。

所以首先,我知道如何設置tabIndex,無論是硬編碼的還是自動生成的用戶控件。我的問題是,如果你有一個使用AJAX的複合控件,例如一個網格控件,並且您的所有表單條目元素都設置了tabIndex屬性,包括AJAX網格控件中的可見行。例如,如果我通過AJAX向網格添加新行,那麼會發生什麼?

下面是Tab鍵順序,而不是在HTML元素的順序:通過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 
Input 3, tab index 6 
etc. 

現在,我添加了一個新行到電網

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,這樣所有沒有屬性的元素都會按照它們在文檔對象模型樹中出現的順序nts,如果tabIndex屬性值大於0,那麼我的Row 2單元格會得到-1作爲它們的tabIndex值。所以通過我的形式按Tab鍵會是這樣的:

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 Plugin和jQuery Field Plug-in(v0.9.2)。

我的想法:

通過表單元素的客戶端-Looping重置所有的tabIndex值。如果你希望元素在表單中出現時的順序,這種方法就行得通,但這可能很慢,很可能會導致頁面在加載時發生呃逆。另外,如果您希望訂單出現在表單中,爲什麼甚至全部使用tabIndex?沒有它的元素將是tabIndex = -1,並按它們在HTML中出現的順序進行製表。

- 對於複合控件指定保留的tabIndex範圍,所以當我點擊我的網格時,它的行1單元格一個tabIndex是4,我說網格後面的下一個控件例如tabIndex = 500,這樣我可以保留當我通過AJAX添加新行時的另一個tabIndex值。

- 你的想法在這裏。

回答

2

雖然這不是您的問題的答案,但我認爲這值得一提。就我所知,-1不是tabindex的默認值,將tabIndex設置爲-1意味着在幾乎所有現代瀏覽器(包括IE)中都無法選擇該元素。如果您在任何測試場景中都假設這可能會非常令人困惑。

+0

傑伊,真是我的壞,它是0。 – nickytonline 2009-10-05 15:32:49

0

其實,在你的情況下,解決方案將非常簡單。只需將所有表單輸入和動態輸入設置爲「1」即可。它將根據相對順序在所有1中選中。唯一的問題是我認爲瀏覽器在文檔加載時會設置標籤索引,所以Ajax元素可能永遠不會進入標籤順序。