Tab Index auf div

Question

sehen Sie das Formular HTML-Code unter

<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 gestylt ich die Vereinbarung Kontrollkästchen in der Weise, dass Radioeingang vollständig versteckt und Hintergrundbild wird an den Wrapper div angewendet und Onclick des Wrapper Divs schaltet sowohl das Hintergrundbild als auch den aktivierten Status der Radioeingabe um.

Ich brauche den tabindex Index für den ‚terms_radio‘ DIV zu setzen, einfach tabindex = „2“ Attribut auf div nicht funktioniert,

Ist es möglich, die punktierte Grenze auf dem Etikett für den Radioeingang zu bringen beim Drücken der TAB, wenn sich der Cursor im E-Mail-Eingabefeld befindet?

Answer 1

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

(HINWEIS HTML 5-Spezifikation ist dies erlauben, aber, und es funktioniert im Allgemeinen unabhängig)

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

Im Wesentlichen alles, was Sie erwarten könnten, um den Fokus zu halten; Formularelemente, Links, etc.

Was ich wahrscheinlich hier machen möchte, ist ein wenig JS (ich würde für etwas relativ schmerzlos empfehlen), um an das Fokusereignis auf dem Eingabeelement zu binden und die Grenze zu setzen das Elternteil div.

Haften Sie diesen an der Unterseite des Körpers Tag jQuery aus dem Google-CDN zu greifen:

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

Dann so etwas wie dies wahrscheinlich den Trick tun würde:

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

Answer 2

Ja! Es gibt eine Spezifikation für ihn, sein genannter WAI-ARIA und sein für die Zugänglichkeit: https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

Answer 3

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 Attribute der letzte Tabindex in Div und Selector_With_Where_Tab_Index_You_Want ist die Klasse oder ID von div, in der tabindex wiederholt werden soll.

Answer 4

Sie können Tabindex = "2" für Radioelement setzen und das Radioelement ausblenden (nicht mit Anzeige: keine, aber mit Z-Index, so dass es tabbable bleibt). Wenn Sie mit der Tabulatortaste auf dem Feld E-Mail-Eingangs zu sein drücken, wird Radio konzentrieren, und können Sie

input:focus+label {} 

verwenden, um das Label

Answer 5

Sie einfach den tabindex-Wert 2-0 ändern könnte, um Stil.

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

Dies stellt den Standardfokuszustand, der mit dem Fluss des Codes geht.

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