タブのインデックス処理 - ASP.NET MVCフォームコントロール

Question

名前、DOB、住所などの基本的な登録フィールドを持つWebページがあります。このページには、表示または非表示になるコントロール（テキストボックス、DOBなど）があります。ラジオボタンを選択します。現在、エンドユーザーがタブキーを使用してページをいっぱいにすると、非表示のコントロールにフォーカスが得られ、タブアウトが期待通りに機能しない（現在の実装ではタブインデックスが設定されていない）。

すべてのコントロールに対して、手動でタブインデックスを増分順に設定してみました。しかし、これらのラジオボタンの選択を切り替える前後、または後に移動すると、タブアウトシナリオが正しく機能しません。

このシナリオを処理するための回避策はありますか？どんな助けもありがとう。

Answer 1

opacity: 0の代わりにdisplay: noneを設定する必要があるため、コントロールはフローから完全に削除されます。 opacity: 0は、コントロールがまだ表示されていて、表示されず、フォーカスと入力を受け取ることができることを意味します。コントロールを2つの表示コントロール間でクリックできます。

display: noneは、コントロールがもう存在しないため、フォーカスと入力を受け取れないことを意味します。

以下のコードスニペットを参照して比較を確認できます。

.opacity .hidden { 
 
    opacity: 0; 
 
    } 
 

 
.display .hidden { 
 
    display: none; 
 
    }

<h3>Opacity: 0 style</h3> 
 
<form class="opacity"> 
 
    <input type="text" /> 
 
    <input type="text" class="hidden" /> 
 
    <input type="text" /> 
 
</form> 
 
<h3>Display: none style</h3> 
 
<form class="display"> 
 
    <input type="text" /> 
 
    <input type="text" class="hidden" /> 
 
    <input type="text" /> 
 
</form>