Tab Index auf div

Sehen Sie bitte das Formular-HTML-code unten

<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>

Hier stylte ich die Vereinbarung Kontrollkästchen in der Weise, dass die radio-Eingang wird komplett ausgeblendet und das Hintergrundbild angewendet wird, um die wrapper-div, und onclick des wrapper-div schaltet das Hintergrundbild sowie die checked-status vom radio-Eingang.

Ich brauche, um das tabindex-index für die 'terms_radio' DIV, einfach tabindex="2" - Attribut auf den div nicht funktioniert,

Ist es möglich, bringen Sie die gepunktete Linie auf dem Etikett für den radio-Eingang bis auf drücken Sie die Tabulatortaste, wenn sich der cursor im E-Mail Eingabefeld?

InformationsquelleAutor der Frage Mithun Sreedharan | 2010-06-17

  1. 30

    DIV-Elemente sind nicht kompatibel mit tabindex in HTML4).

    (HINWEIS HTML 5 Spezifikation hat ermöglichen dies, jedoch, und es allgemein funktioniert unabhängig)

    Die folgenden Elemente unterstützen das tabindex-Attribut: A, AREA, BUTTON, INPUT, OBJECT, SELECT und TEXTAREA.

    Im wesentlichen alles, was Sie erwarten würden, um in der Lage zu halten, konzentrieren; Formularelemente, links, etc.

    Was ich denke, Sie wahrscheinlich wollen zu tun, hier ist ein wenig JS (ich würde empfehlen, jQuery für etwas relativ schmerzlos) zu binden, um die Fokus-event auf dem input-element, und legen Sie den Rand des übergeordneten div.

    Kleben diesen an der Unterseite des body-Tags zu packen, jQuery aus dem Google CDN:

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

    Dann so etwas würde wahrscheinlich den trick tun:

    $(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');
        }
    });
});

    InformationsquelleAutor der Antwort antz29

  2. 16

    Ja! Es ist eine spec für ihn, seine namens WAI-ARIA und Ihre Barrierefreiheit : https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

    InformationsquelleAutor der Antwort hdf54d56

  3. 4

    Können Sie einfach ändern Sie die tabindex-Wert von 2 auf 0.

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

    Diese bietet die Standard-Fokus Stand, geht mit dem Fluss des code.

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

    InformationsquelleAutor der Antwort Poshan Bastola

  4. 0

    Können Sie setzen tabindex="2" für radio-element ein-und ausblenden des radio-Elements (nicht mit display:none, aber mit z-index, so dass es bleibt tabbable). Wenn Sie die Tabulatortaste drücken auf E-Mail-Eingabefeld, radio-Fokus erhält, und Sie können 

    input:focus+label {}

    Stil das label

    InformationsquelleAutor der Antwort StackExploded

  5. -1

    jSFiDDLE

    $(document).ready(function() {
lastIndex = 0;
$(document).keydown(function(e) {
    if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
    if (e.keyCode == 9) {
        if (e.shiftKey) {
            //Focus previous input
            if (thisTab == startIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
                return false;
            }
        } else {
            if (thisTab == lastIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
                return false;
            }
        }
    }
});
var setTabindexLimit = function(x, fancyID) {
        console.log(x);
        startIndex = 1;
        lastIndex = x;
        tabLimitInID = fancyID;
        $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
    }
/*Taking last tabindex=10 */
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want");
});

    setTabindexLimit() Funktion zwei Attribut 10 die letzten Tabindex-in Div und Selector_With_Where_Tab_Index_You_want ist die Klasse oder die ID der div, In dem Sie wollen tabindexto wiederholen.

    InformationsquelleAutor der Antwort Code Spy

Schreibe einen Kommentar