web-dev-qa-db-ja.com

divのタブインデックス

以下のフォームHTMLコードをご覧ください

<form method="post" action="register">      
    <div class="email">
        Email   <input type="text" tabindex="1" id="email" value="" name="email">                   </div>
    </div>
    <div class="agreement">
        <div tabindex="2" class="terms_radio">
            <div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;">
                <input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label>
            </div>
        </div> 
    </div>
    <div class="form_submit">
        <input type="button" tabindex="3" value="Cancel" name="cancel">
        <input type="submit" tabindex="4" value="Submit" name="submit">         
    </div>
</form>

ここでは、ラジオ入力が完全に非表示になり、背景画像がラッパーdivに適用されるように契約チェックボックスのスタイルを設定し、ラッパーdivのonclickにより、ラジオ入力のチェックステータスだけでなく背景画像も切り替えます。

'terms_radio' DIVにtabindexインデックスを設定する必要があります。単にdivのtabindex = "2"属性が機能しないため、

カーソルが電子メール入力フィールドにあるときにTABを押すと、ラジオ入力のラベルに点線の境界線を表示することは可能ですか？

htmlinputradio-buttonlabeltabindex
32
Mithun Sreedharan

DIV要素はtabindex HTML4 ）と互換性がありません。

（[〜＃〜] note [〜＃〜]HTML 5仕様doesただし、これは許可しますが、一般的には動作します）

次の要素がtabindex属性をサポートしています：A、AREA、BUTTON、INPUT、OBJECT、SELECT、およびTEXTAREA。

基本的にあなたが焦点を当てることができると期待するものは何でも。フォーム要素、リンクなど。

ここでおそらくやりたいと思うことは、入力要素のフォーカスイベントにバインドし、親divに境界線を設定するために、少しのJSを使用することです（比較的痛みのないものには jQuery をお勧めします）。

これをbodyタグの下部に貼り付けて、Google CDNからjQueryを取得します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

次に、このような何かがおそらくトリックを行います：

$(function() {
    $('div.radio input').bind({
        focus : function() {
            $(this).closest('div.radio').css('border','1px dotted #000');
        },
        blur : function() {
            $(this).closest('div.radio').css('border','none');
        }
    });
});
30
antz29

はい！ WAI-ARIAと呼ばれ、アクセシビリティのための仕様があります： https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

16
hdf54d56

Tabindex値を2から0に変更するだけです。

<div tabindex="0" class="terms_radio">

これにより、コードのフローに伴うデフォルトのフォーカス状態が提供されます。

https://www.w3.org/WAI/PF/aria-practices/#focus_tabindex

4
Poshan Bastola

ラジオ要素にtabindex = "2"を配置し、ラジオ要素を非表示にできます（display：noneではなく、z-indexを使用して、タブ移動可能のままにします）。メール入力フィールドにあるタブを押すと、ラジオがフォーカスを取得し、使用できます

input:focus+label {}

ラベルのスタイルを設定するには

0
StackExploded