Pestaña Índice de la div

Question

Por favor, ver el código de formulario 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> 

Aquí LABRÓ la casilla de verificación del acuerdo de tal manera que la entrada de radio está completamente oculto y la imagen de fondo se aplica al div contenedor, y onclick de la envoltura div cambiará la imagen de fondo, así como el estado verificado de la entrada de radio.

tengo que configurar el índice tabindex en el 'terms_radio' DIV, simplemente tabindex = "2" atributo en div no está funcionando,

¿Es posible llevar el borde de puntos en la etiqueta para la entrada de radio presionando la tecla TAB cuando el cursor está en el campo de entrada de correo electrónico?

Answer 1

elementos DIV no son compatibles con tabindex in HTML4).

(NOTA HTML 5 especificación no permite esto, sin embargo, y habitualmente trabaja independientemente)

Los siguientes elementos soportan el atributo tabindex: A, AREA, BUTTON, INPUT, objeto, seleccione y TEXTAREA.

Esencialmente cualquier cosa que esperaría ser capaz de mantener el foco; Formar elementos, enlaces, etc.

Lo que creo que probablemente quiera hacer aquí es usar un poco de JS (recomendaría jQuery para algo relativamente sencillo) para enlazar al evento de foco en el elemento de entrada y establecer el borde en el padre div.

palillo de esto en la parte inferior de su cuerpo de la etiqueta para agarrar jQuery desde el CDN de Google:

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

Entonces algo como esto sería probablemente el truco:

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

Sí! Hay una especificación para ello, se llama WAI-ARIA y su accesibilidad: 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() función de dos atributos que es la última TABINDEX en Div y Selector_With_Where_Tab_Index_You_Want es la clase o ID de div En el que desea repetir tabindexto.

Answer 4

Puede poner tabindex = "2" para el elemento de radio y ocultar el elemento de radio (no con pantalla: ninguno, pero con índice z, para que se pueda tabular). Cuando se pulsa la pestaña de estar en el campo de entrada de correo electrónico, radio obtiene foco, y se puede utilizar

input:focus+label {} 

con el estilo de la etiqueta

Answer 5

Usted simplemente puede cambiar el valor de índice de tabulación a partir 2 a 0.

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

Esto proporciona el estado de enfoque predeterminado que va con el flujo de su código.

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