1

3 つのテキスト ボックスとその横に [追加] ボタンがある jsp ページがあります。ここtabindexで、動的に追加された要素の を設定する必要があります。どうすればいいですか？

4

1 に答える 1

2

[お気づきかもしれませんが、コードを投稿すると、他の誰かがより明確な答えを出すことができます。作業する例がなければ、あなたのコードと環境が何であるかを想像することしかできません.ASP.NET MVC3 + jQueryから]

[このスタックオーバーフローの投稿の情報を使用し、少し修正しました。]

jQuery を使用して tabindex 値を変更します。jQuery によって動的に追加される複数のフォームがあります。フォームは div と style="display: table" を使用して、テキスト フィールドを列に編成します。

【関連するCSSスタイル】

.tb-table
{
    display: table;
}

.tb-row
{
    display: table-row;
}

.tb-cell
{
    display: table-cell;
}

[ブラウザー用の html を生成する ASP.NET MVC3 Razor cshtml のチャンク -- 読み取り可能である必要があります]

<div class="tb-table">
    <div id="namerow1" class="tb-row">
        <div class="tb-label tb-cell" id="l_firstname1">
            @Html.LabelFor(model => model.firstname1)
        </div>
        <div class="tb-field tb-cell" id="firstname1">
            @Html.TextBoxFor(model => model.firstname1, new { tabindex = "1" })
            @Html.ValidationMessageFor(model => model.firstname1)
        </div>
        <div class="tb-label tb-cell" id="l_firstname2">
            @Html.LabelFor(model => model.firstname2)
        </div>
        <div class="tb-field tb-cell" id="firstname2">
            @Html.TextBoxFor(model => model.firstname2, new { tabindex = "2" })
            @Html.ValidationMessageFor(model => model.firstname2)
        </div>
    </div>
    <div id="namerow2" class="tb-row">
        <div class="tb-label tb-cell">
            @Html.LabelFor(model => model.lastname1)
        </div>
        <div class="tb-field tb-cell">
            @Html.TextBoxFor(model => model.lastname1, new { tabindex = "1" })
            @Html.ValidationMessageFor(model => model.lastname1)
        </div>
        <div class="tb-label tb-cell">
            @Html.LabelFor(model => model.lastname2)
        </div>
        <div class="tb-field tb-cell">
            @Html.TextBoxFor(model => model.lastname2, new { tabindex = "2" })
            @Html.ValidationMessageFor(model => model.lastname2)
        </div>
    </div>
</div>

列のすべての値に tabindex を使用します。ユニークな注文だけではありません。私がテストしたブラウザでは、同じタブインデックスを持つ複数のテキスト フィールドがある場合、html コードで最初に検出されたテキスト フィールドがタブ ナビゲーションによって最初に選択されます。

したがって、私が持っているフォームごとに、0 ～ 9 のタブ値を使用してそれらをグループ化します。個々のフォームのタブ オーダーが思いどおりに機能するようになったら、次の jQuery を使用して、動的に追加する各フォームの tabindex 値を 10 (または 20、30、または 40) ずつ増やします。最初の 10 進数である 0 ～ 9 は、そのフォーム内のタブを編成し、係数を 10 ずつ増やすと、後続のフォーム タブが追従し続けます。

$('.createtab-form [tabindex]').each(function () {$(this).attr('tabindex', parseInt($(this).attr('tabindex'))+10)})

これは私自身の最初の試みです。他の誰かがより良い方法を持っていると確信しています。どう考えているか教えてください。

于 2011-05-02T22:55:18.890 に答える