web-dev-qa-db-fra.com

Onglet Index sur div

S'il vous plaît voir le formulaire HTML code ci-dessous

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

Ici, j'ai stylé la case à cocher d'accord de manière à ce que l'entrée radio soit complètement masquée et que l'image d'arrière-plan soit appliquée au div wrapper, et qu'un clic sur le div wrapper basculera l'image d'arrière-plan ainsi que le statut vérifié de l'entrée radio.

J'ai besoin de définir l'index tabindex sur la div "terms_radio", simplement tabindex = "2" sur l'attribut div ne fonctionne pas,

Est-il possible de faire apparaître la bordure en pointillé sur l'étiquette pour l'entrée radio en appuyant sur la tabulation lorsque le curseur est dans le champ de saisie du courrier électronique?

htmlinputradio-buttonlabeltabindex
31
Mithun Sreedharan

Les éléments DIV ne sont pas compatibles avec tabindex en HTML4 ).

(NOTE spécification HTML 5 ne autorise-t-il cela, cependant, et cela fonctionne généralement indépendamment)

Les éléments suivants prennent en charge l'attribut tabindex: A, AREA, BUTTON, INPUT, OBJECT, SELECT et TEXTAREA.

Essentiellement, tout ce que vous vous attendez à être capable de rester concentré. éléments de formulaire, liens, etc.

Ce que je pense que vous voulez probablement faire ici est d’utiliser un peu de JS (je recommanderais jQuery pour quelque chose de relativement simple) pour lier l’événement de focus sur l’élément d’entrée et définir la bordure sur la div parent 

Collez ceci au bas de votre balise body pour récupérer jQuery à partir du CDN Google:

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

Alors, quelque chose comme ceci ferait probablement l'affaire:

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

Oui! Il existe une spécification pour cela, appelée WAI-ARIA et pour accessibilité: https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

16
hdf54d56

Vous pouvez simplement changer la valeur tabindex de 2 à 0.

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

Cela fournit l'état de focus par défaut qui accompagne le flux de votre code.

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

4
Poshan Bastola

Vous pouvez mettre tabindex = "2" pour l'élément radio et masquer l'élément radio (pas avec display: none, mais avec z-index pour qu'il reste tabable) Lorsque vous appuyez sur la touche Tabulation dans le champ de saisie du courrier électronique, la radio obtient le focus et vous pouvez utiliser 

input:focus+label {}

styliser l'étiquette

0
StackExploded