2009-08-04 27 views
0

Ich habe einige Posts zu tabIndex-Problemen gesehen, aber ich konnte keinen finden, der dem unten stehenden Szenario entspricht, den ich beheben muss.tabIndex-Attribut und AJAX

Also hier ist die Übersicht über das Projekt. Es ist eine ASP.NET 2.0 Web App, die AJAX 1.0 Extensions und jQuery verwendet. Ich suche nach Ideen aus jeder Programmiersprache, um ein Szenario wie dieses zu behandeln.

Also zuerst, ich weiß, wie man den tabIndex, ob es hart-codiert oder automatisch in einem Benutzer-Steuerelement generiert wird. Das Problem, das ich habe, ist, was ist, wenn Sie eine zusammengesetzte Kontrolle mit AJAX, z. Ein Gitter-Steuerelement und Sie haben Ihre tabIndex-Eigenschaften für alle Formulareintragselemente einschließlich der sichtbaren Zeilen in Ihrem AJAX-Raster-Steuerelement festgelegt. Was passiert zum Beispiel mit der Tab-Reihenfolge, wenn ich über AJAX eine neue Zeile zum Grid hinzufüge?

Unterhalb der Tab-Reihenfolge ist, nicht die Reihenfolge der Elemente in HTML:

Erste Seite laden

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. 

jetzt über AJAX, füge ich eine neue Zeile an das Netz

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. 

Nun, was ich verstehe, der Wert des tabIndex-Attributs ist standardmäßig -1, so dass alle Elemente ohne das Attribut in der Reihenfolge, in der sie in der Dokumentobjektmodellstruktur nach einem beliebigen Element erscheinen, in ein Register gesetzt werden nts, ​​falls vorhanden, die einen tabIndex-Attributwert> 0 haben. Meine Zeile-2-Zellen erhalten also -1 als ihren tabIndex-Wert. So Tabbing durch meine Form so sein würde:

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) 

ich bei einigen jQuery-Plugins gesucht, aber keine handhaben, was ich tun will (oder zumindest ich glaube nicht, sie tun). Ich habe das jQuery Tabindex Plugin und das jQuery Field Plug-in (v0.9.2) ausgecheckt.

Meine Ideen:

-Looping durch Formelemente clientseitige alle tabIndex Werte zurückgesetzt werden. Dies funktioniert, wenn Sie die Reihenfolge der Elemente so festlegen möchten, wie sie im Formular angezeigt werden. Dies ist jedoch wahrscheinlich langsam und wird höchstwahrscheinlich dazu führen, dass die Seite beim Laden ausfällt. Auch wenn Sie die Reihenfolge, wie sie im Formular erscheinen, möchten, warum überhaupt tabIndex überhaupt verwenden? Elemente ohne es werden tabIndex = -1 und Tab in der Reihenfolge, in der sie in HTML angezeigt werden.

-Für Composite-Controls reservierten TabIndex-Bereich so festlegen, wenn ich mein Gitter mit seiner Zeile 1 Zelle ein TabIndex 4 sein, sage ich das nächste Steuerelement nach dem Raster wird zum Beispiel tabIndex = 500, so dass ich reservieren kann die anderen tabIndex-Werte für das Hinzufügen neuer Zeilen über AJAX.

-Ihre Idee geht hierhin.

Antwort

2

Obwohl dies nicht die Antwort auf Ihre Frage ist, dachte ich, dies ist erwähnenswert. -1 ist nicht der Standardwert für Tabindex, soweit ich weiß, dass das Setzen von TabIndex auf -1 bedeutet, dass Sie in fast allen modernen Browsern (IE eingeschlossen) nicht auf dieses Element zugreifen können. Dies könnte sehr verwirrend sein, wenn Sie dies in einem Testszenario vermuten.

+0

Jay, wahr mein schlechtes, es ist 0. – nickytonline

0

Eigentlich wäre in Ihrem Fall die Lösung ziemlich einfach. Setzen Sie einfach alle Formulareingaben und dynamischen auf "1". Es wird alle 1en durchblättern, abhängig von der relativen Reihenfolge. Das einzige Problem ist, dass der Browser den Tab-Index beim Laden des Dokuments einstellt, so dass Ajax-Elemente niemals in die Tab-Reihenfolge gelangen.