2009-08-04 9 views
0

tabIndexの問題についての記事をいくつか見てきましたが、私が修正する必要がある以下のシナリオのようなものを見つけることができませんでした。tabIndexの属性とAJAX

ここではプロジェクトのローダウンです。 AJAX 1.0 ExtensionsとjQueryを使用したASP.NET 2.0 Webアプリケーションです。私は、このようなシナリオを扱うために、プログラミング言語のアイデアを探しています。

まずは、ユーザーコントロールでハードコードされているのか、自動生成されているのかにかかわらず、tabIndexの設定方法を知っています。私が持っている問題は、あなたがAJAXを使ったコンポジットコントロールを持っている場合です。グリッドコントロールを使用し、tabIndexプロパティをすべてAJAXグリッドコントロールの表示行を含むすべてのフォームエントリ要素に設定します。たとえば、AJAXを使用してグリッドに新しい行を追加すると、タブの順序付けはどうなりますか?以下は

がタブ順序ではなく、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であるため、属性を持たないすべての要素は、任意の要素の後にドキュメントオブジェクトモデルツリーに表示される順序でタブ付きになります。もしあれば、それは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 PluginとjQuery Field Plug-in(v0.9.2)をチェックしました。

私のアイデア:

フォーム要素のクライアント側を通じて-Loopingは、すべてのtabIndex値をリセットします。これは、フォームに表示される要素の順序が必要な場合には機能しますが、これはおそらく遅く、ロード時にページが乱れる可能性が高くなります。同様に、フォームに表示されているように注文したい場合、なぜtabIndexを使用するのでしょうか?それがない要素はtabIndex = -1になり、HTMLで表示される順番でタブされます。

- 複合コントロールの場合、予約されたtabIndex範囲を指定します。グリッドに1行目のセルが1つある場合、1つのtabIndexが4で、グリッドの後に次のコントロールが表示されます。例えば、tabIndex = 500 AJAXを介して新しい行を追加するときの他のtabIndex値。

- あなたのアイデアはここにあります。

答えて

2

これはあなたの質問に対する答えではありませんが、これは言及する価値があると思いました。 -1はtabindexのデフォルト値ではありません。tabIndexを-1に設定すると、ほぼすべての最新のブラウザ(IEを含む)でその要素にタブすることはできません。テストシナリオでこれを仮定した場合、これは非常に混乱する可能性があります。

+0

ジェイ、本当に私の悪い、それは0です。 – nickytonline

0

実際、あなたの場合、解決策はかなりシンプルになります。すべてのフォーム入力と動的入力を「1」に設定するだけです。それは、相対的な順序に依存して、1のすべてを突き抜けるでしょう。問題は、ブラウザがドキュメントのロード時にタブインデックスを設定していると思うので、Ajaxの要素がタブオーダーに入ることはありません。