2009-08-04 35 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元素可能永远不会进入标签顺序。