39

以下のフォーム 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 を押すと、ラジオ入力のラベルの点線の境界線を表示することは可能ですか?

4

4 に答える 4

35

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

(注HTML 5 仕様ではこれが許可されていますが、通常は問題なく動作します)

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');
        }
    });
});
于 2010-06-21T21:49:49.600 に答える
16

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

于 2012-10-20T18:06:52.040 に答える