17

大きなフォームをより使いやすくしようとしています。特殊なケースで使用されるフィールドがいくつかあり、これらは必要に応じて公開するためのリンクを持つアコーディオン コンテナ内に隠されています。

ただし (少なくとも Chrome では) フィールドをタブで移動すると、ビューからは非表示になっているがキーボード入力でアクセスできるフィールドにフォーカスが置かれることになります。

これを処理する Good™ 方法は何でしょうか? jQuery を使用して、display != none に基づいて tabindex を設定し、アコーディオン イベントが発生したときに再設定しますか? CSS によって隠されているフィールドがフォーカスを受け取ると、囲んでいるアコーディオンが開かれるのでしょうか?

これは、以下の html を使用して問題を示す jsfiddle です。タブは、表示からアコーディオン リンク、非表示のテキスト入力、最後に表示されるようになります: http://jsfiddle.net/2EfXM/

<p class="file_info">
    <label>Visible
        <input type="text" name="vis1" id="vis1" class="date" value="" />
    </label>
</p>
<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle accordion-arrow" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Show more fields
      </a>

        </div>
        <div id="collapseOne" class="accordion-body collapse out">
             <h5>Source/Use Metadata</h5>

            <p class="file_info">
                <label>Hidden:
                    <input type="text" name="default_original_source" id="default_original_source" class="" value="" />
                </label>
            </p>
        </div>
    </div>
</div>
<p class="file_info">
    <label>Visible
        <input type="text" name="vis2" id="vis2" class="date" value="" />
    </label>
</p>

興味深い補足事項: display:noneIE 9 で jQuery 検証を使用すると、エラーが発生しました。隠しフィールドにエラーが発生しました。

SCRIPT5007: Unable to get value of the property 'call': object is null or undefined jquery.validate.js, line 1174 character 5

いくつかの調査の後、これが最終的な解決策でした：

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility:visible;
}
4

1 に答える 1

20

アコーディオンの機能とフォームの検証を維持するように更新

あなたの主な問題は、コードが折りたたまれた要素visibility: hiddenに（注：もともと私が持っていdisplay: noneたが、OPのコメントに従ってフォーム検証の問題を作成した）を設定する必要があることです。ではvisibility: hidden、タブ移動は無視されます (要素がドキュメントで表示されなくなったため)。

前のフィドルのコードは、height: 0. この変更されたフィドルvisibilityは、同様に制御するためにいくつかの CSS を追加します。

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility: visible;
}

それはあなたが望むように機能しています。

于 2013-05-31T16:01:51.297 に答える