it-swarm.com.de

Tab Index auf div

Bitte beachten Sie den untenstehenden Formular-HTML-Code

<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 habe ich das Kontrollkästchen für die Vereinbarung so gestylt, dass die Radioeingabe vollständig ausgeblendet ist und das Hintergrundbild auf das Wrapperdiv angewendet wird. Wenn Sie auf das Wrapperdiv klicken, wird das Hintergrundbild und der Status des Radioeingangs umgeschaltet.

Ich muss den tabindex-Index auf das DIV 'terms_radio' setzen, einfach das tabindex = "2" -Attribut für div funktioniert nicht.

Ist es möglich, die gepunktete Umrandung des Etiketts für den Radioeingang durch Drücken der TAB-Taste nach oben zu bringen, wenn sich der Cursor im E-Mail-Eingabefeld befindet?

31

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

(NOTE HTML 5 spec do lässt dies jedoch zu und es funktioniert in der Regel ungeachtet)

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

Im Wesentlichen alles, was Sie erwarten würden, um den Fokus zu behalten; Formularelemente, Links usw.

Ich denke, Sie möchten hier wahrscheinlich ein wenig JS verwenden (ich würde jQuery für etwas relativ schmerzloses empfehlen), um an das focus -Ereignis des Eingabeelements zu binden und den Rand des übergeordneten div festzulegen. 

Stecken Sie das hier unten in Ihr Body-Tag, um jQuery von Google CDN zu erhalten:

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

Dann würde so etwas 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');
        }
    });
});
30
antz29

Ja! Es gibt eine Spezifikation dafür, es heißt WAI-ARIA und seine Zugänglichkeit: https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

16
hdf54d56

Sie können den tabindex-Wert einfach von 2 auf 0 ändern.

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

Dadurch wird der Standardfokusstatus bereitgestellt, der zum Fluss Ihres Codes gehört.

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

4
Poshan Bastola

Sie können tabindex = "2" für Radioelement setzen und das Radioelement ausblenden (nicht mit Anzeige: keine, sondern mit Z-Index, damit es tabulierbar bleibt). Wenn Sie die Tabulatortaste im E-Mail-Eingabefeld drücken, erhält das Radio den Fokus und Sie können es verwenden 

input:focus+label {}

das Label gestalten

0
StackExploded