html - attribute - Tab Index en div

title html5

Question

Por favor vea el código HTML del formulario a continuación

<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í diseñé la casilla de verificación concordancia de tal manera que la entrada de radio está completamente oculta y la imagen de fondo se aplica al divisor envoltorio, y al hacer clic en el divisor envoltorio se alterna la imagen de fondo y el estado comprobado de la entrada de radio.

Necesito establecer el índice tabindex en el atributo ''terms_radio'' DIV, simplemente tabindex = "2" en div no funciona,

¿Es posible poner el borde punteado 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

¡Sí! Hay una especificación para él, se llama WAI-ARIA y es para accesibilidad: https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

Answer 2

Los elementos DIV no son compatibles con tabindex en HTML4 ).

( NOTA: la especificación HTML 5 sí lo permite, sin embargo, y comúnmente funciona independientemente)

Los siguientes elementos son compatibles con el atributo tabindex: A, AREA, BUTTON, INPUT, OBJECT, SELECT y TEXTAREA.

Esencialmente cualquier cosa que esperarías 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 enfoque en el elemento de entrada y establecer el borde en el div principal.

Pegue esto en la parte inferior de la etiqueta de su cuerpo para tomar jQuery del Google CDN:

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

Entonces algo como esto probablemente haga 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 3

Puede poner tabindex = "2" para elemento de radio y ocultar el elemento de radio (no con display: none, pero con z-index, para que se pueda tabular). Cuando presiona tab en el campo de entrada de correo electrónico, la radio se enfoca y puede usar

input:focus+label {}

para darle estilo a la etiqueta

Answer 4

Simplemente podría cambiar el valor de tabindex de 2 a 0.

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

Esto proporciona el estado de enfoque predeterminado que acompaña al flujo de su código.

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

Answer 5

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 dos atributo 10 que es el último Tabindex en Div y Selector_With_Where_Tab_Index_You_Want es la clase o ID de div En el que desea repetir tabindexto.