Por favor vea el formulario el código HTML de abajo

<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í yo de estilo el acuerdo casilla de verificación de tal manera que el radio de entrada está completamente oculto y la imagen de fondo se aplica al contenedor div, y onclick del contenedor div, cambiará la imagen de fondo así como la comprobación de estado de la entrada de radio.

Necesito para establecer el tabindex índice en el ‘terms_radio’ DIV, simplemente tabindex=»2″ atributo div no está funcionando,

Es posible llevar el borde de puntos en la etiqueta de la entrada de radio en presionar la PESTAÑA cuando el cursor está en el campo de entrada de correo electrónico?

5 Comentarios

  1. 30

    DIV elementos no son compatibles con tabindex en HTML4).

    (NOTA HTML 5 spec hace permitir esto, sin embargo, y es comúnmente funciona independientemente)

    Los siguientes elementos de apoyo el atributo tabindex: UNA, de ÁREA, de BOTÓN, de ENTRADA, de OBJETO, SELECCIONE, y TEXTAREA.

    Esencialmente, cualquier cosa se puede esperar a ser capaz de mantener el foco; los elementos de los formularios, enlaces, etc.

    Lo que yo creo que usted probablemente querrá hacer aquí es utilizar un poco de JS (yo recomendaría jQuery para algo relativamente indoloro) para enlazar con el evento enfoque en el elemento de entrada y el conjunto de la frontera en el div padre.

    Palo esta en la parte inferior de su cuerpo de la etiqueta para agarrar jQuery desde 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 haría 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');
            }
        });
    });
  2. 0

    Usted puede poner tabindex=»2″ para la radio del elemento y ocultar el radio del elemento (no con display:none, pero con z-index, por lo que se mantiene tabbable). Al presionar la tecla tab estar en el campo de entrada de correo electrónico, radio obtiene el foco, y usted puede utilizar

    input:focus+label {}

    el estilo de la etiqueta

  3. -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() función de 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 tabindexto repetir.

Dejar respuesta

Please enter your comment!
Please enter your name here