1

簡単に変更できない従来のフリーテキスト HTML が混在する高度な eform アプリケーションを維持しています。これまで tabindex は使用されておらず、文字ストリームの順序に依存していました。

ページの途中で、次のようなカスタムのタブ順序で入力を含むテーブルを導入する必要があります。

|-----|-----|-----|
| | 1 | 3 | 5 |
|-----|-----|-----|
| | 2 | 4 | 6 |
|-----------------|

従来の/以前に追加された入力がページにレンダリングされる方法で、実際にそれらを動的/中央で変更して、タブインデックスを順番に出力することができます。そのような：

[入力、タブインデックス: 1]

|-----|-----|-----|
| | 2 | 4 | 6 |
|-----|-----|-----|
| | 3 | 5 | 7 |
|-----------------|

[入力、タブインデックス: 8]

しかし、動的にレンダリングされないフリーテキストの HTML アンカーが表示され始めると、問題が発生します (かなりの正規表現ロジックを追加しない限り、タブインデックスを簡単に追加することはできません)。したがって、タブは次のようになります。

[入力、タブインデックス: 1]

|-----|-----|-----|
| | 2 | 4 | 6 |
|-----|-----|-----|
| | 3 | 5 | 7 |
|-----------------|

【アンカーリンク】
[入力、タブインデックス: 8]

これにより、リンクにタブを付けることができなくなります。これのさらに悪い、より高度なケースがあるかもしれません...しかし、問題は理解できると思いますか?

だから私の質問はこれです...どういうわけか、次のような意味である種のタブインデックスグループを割り当てることは可能ですか:

[タブグループ1]
[入力]
[/タブグループ1]

[タブグループ2]
|-----|-----|-----|
| | 1 | 3 | 5 |
|-----|-----|-----|
| | 2 | 4 | 6 |
|-----------------|
[/タブグループ2]

[タブグループ3]
【アンカーリンク】
[入力]
[/タブグループ3]

前と同じようにタブ操作を行うことができるように、入力から最も近いアンカーへ、次の入力へなど、文字ストリームの順序でジャンプします...ただし、[tabgroup2] 内では、次の順序で移動しますそこにタブインデックスがありますが、[tabgroup2] に進み、すべての要素がtabindex="0"であるかのようにタブで移動します。

私が探しているのは、いくつかの魔法の HTML ソリューション (可能性は低い)、またはこのようなものを実装している可能性のある比較的単純な JavaScript ライブラリです。

または、これが実際に存在しない場合は、別のアイデアや、私自身が実装しようとした場合に考えられる注意事項についての考えを聞くのは興味深いでしょう.

4

1 に答える 1

1

さて、私は自分のコードでこれを解決しました。結果の JavaScript は次のようになります。

function updateTabIndex() {
    $('a, area, button, input, object, select, textarea').each(function(i, e) {
        var element = $(e);

        var tabIndex = i;
        if (element.attr('data-tabindexoffset')) {

            var tabgroup = $(element.closest('[data-tabgroup]'));
            if (!tabgroup.attr('data-tabindexstart')) {
                tabgroup.attr('data-tabindexstart', tabIndex);
            }

            var tabIndexStart = parseInt(tabgroup.attr('data-tabindexstart'));
            tabIndex = tabIndexStart + parseInt(element.attr('data-tabindexoffset'));
        }

        $(e).attr('tabindex', tabIndex);
    });
}

$(function() {
    updateTabIndex();
});

これにより、タブインデックスが通常の文字ストリーム順序に従わない既知の要素グループ内のオフセットを除いて、タブインデックスを使用できなくなります。グループの後のタブインデックスは常に同じであるため、かなりうまく機能しているようです。間にあるものだけが並べ替えられます。

このようなソリューションの唯一の問題は、AJAX 呼び出しに追加および削除された要素がある場合です。そのため、すべてのインデックスを再計算する必要があります。しかし、それはかなり速いはずです。

HTML の例は次のとおりです。

<table data-tabgroup="1">
    <tr>
        <td><input type="text" name="b" data-tabindexoffset="0" value="1" /></td>
        <td><input type="text" name="c" data-tabindexoffset="2" value="3" /></td>
    </tr>
    <tr>
        <td><input type="text" name="d" data-tabindexoffset="1" value="2" /></td>
        <td><input type="text" name="e" data-tabindexoffset="3" value="4" /></td>
    </tr>
</table>

<a href="#">A link</a>
<input type="text" name="f" />
于 2012-12-19T22:45:01.997 に答える