0

tabindexフォームの入力フィールドを論理的にトラバースするために使用するフォームがあります。ただし、私のフォーム内には、その要素にも適用されるjQWidgetsグリッドがあります。tabindex入力フィールドが 内にネストされているため、タブインデックスの順序が乱れているため、ボタンdivを使用すると、正しい順序でトラバースする代わりに、フォーカスがページをジャンプします。Tab

HTMLまたはJavascript（jQuery）を使用して、これが発生しないようにする方法を誰かが見ることができますか?

グリッドをDOMのさらに下にネストしようとしましたが、これは影響しませんでした...

HTML の構造は、すべてのinputフィールドで同じでなければなりません

これはここで見ることができます: http://jsfiddle.net/TN7xL/1/

または、これが私のコードのサンプルです (関係のない ID とクラスをすべて削除しました)。

<form>
    <div class="row">
        <div class="column">
            <div>
                <label for="foo">Foo</label>
                <div>
                    <input type="text" id="foo" name="foo" tabindex="1" />
                </div>
            </div>
            <div>
                <label for="bar">Bar</label>
                <div>
                    <input type="text" id="bar" name="bar" tabindex="2" />
                </div>
            </div>
        </div>
        <div class="column">
            <div>
                <label for="name">Name</label>
                <div>
                    <input type="text" id="name" name="name" tabindex="3" />
                </div>
            </div>
            <div>
                <label for="surname">Surname</label>
                <div>
                    <input type="text" id="surname" name="surname" tabindex="4" />
                </div>
            </div>
        </div>
    </div>
    <!-- THERE ARE MORE ROWS AND COLUMNS IN MY FULL SCRIPT -->
    <div id="grid" class="row">
        <!-- THE FOLLOWING IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
        <div tabindex="0">
            <div tabindex="1">GRID HERE</div>
        </div>
        <!-- THE ABOVE IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
    </div>
    <div class="row">
        <div class="column">
            <div>
                <label for="field">Another Field</label>
                <div>
                    <input type="text" id="field" name="field" tabindex="5" />
                </div>
            </div>
        </div>
    </div>
</form>

私の目的はtabindex、jQWidgets グリッドによって設定された を効果的に無視することですが、これを行う方法がわかりません...

4

4 に答える 4

2

どのjqWidget tabindex が設定されているかわからないという理由だけで、私は次の戦略を使用します:
1- 導入するすべての入力に tabindex の順序を
与えます。
jqWidget の初期化ごとに導入したものではありません。

<html>
    <input type="text" class="tabindex" tabindex="2" />
    <div id="split"> ... </div>

<script>
    $("#split").jqxSplitter(settings);

    // Delete every tabindex introduced by jqWidgets
    $("[tabindex]:not(.tabindex)").removeProp("tabindex").removeAttr("tabindex");

このソリューションは、ほぼすべての jqWidget コンポーネントでうまく機能します。
グリッドまたはすべてのループ状況では、データ バインド "attr: {class 'tabindex', tabindex: $index}" でノックアウトを使用できます。

既知のバグ:
ナビゲーション バーがある場合、タブがそこからアドレス バーにジャンプします。


私の2セント

N

于 2014-03-17T15:08:58.833 に答える
0

jQuery の removeAttr メソッドを使用して、自動生成された tabindex を削除できます。http://api.jquery.com/removeAttr/

于 2013-06-04T11:24:24.183 に答える
-1

$(document).ready(function(){ $('input').removeAttr("tabindex"); });

于 2013-07-17T20:07:56.590 に答える