faire attention invisible pour les boutons radio sur clic, mais l'accent doit être visible sur la navigation du clavier

Question

Comment puis-je faire concentrer invisible pour les boutons radio uniquement clic (focus doit être visible à travers la navigation au clavier)

souris désactivation vers le bas événement ou en utilisant settimeout (() => $ (event.target) .blur(), 1) sur mousedown fonctionne mais la sélection de boutons radio à l'aide des touches fléchées ne fonctionne pas lorsque le focus provient du clic. Alors, quel est le meilleur moyen de rendre la mise au point invisible pour les boutons radio uniquement en cliquant sans que la sélection de la touche fléchée soit inutilisable?

Merci à l'avance

Answer 1

Cela a fonctionné pour moi

gestionnaires d'événements ajoutés pour mousedown et flou comme ci-dessous

--------------- modèle -----------------

<input type="radio" 
(mousedown)="removeOutline($event)" 
(blur)="radioBlur($event)"/> 

------ événement ----------------- Handlers

removeOutline(event: MouseEvent): void { 
     $(event.target).addClass("focus"); 
    } 

radioBlur(event: MouseEvent): void { 
     $(event.target).removeClass("focus"); 
     if ($(event.target).attr("class") === "") { 
      $(event.target).removeAttr("class"); 
     } 
    } 

-----------css--------------- 
    .focus { 
     outline: 0; 
    } 

Answer 2

parlons-nous

pointer-events: none; 

ou suis-je manque quelque chose?

Answer 3

Vous pouvez essayer ce code:

HTML:

<input type="text" class="inp" /> 
<input type="radio" class="rb" /> 

CSS:

.inp { 
    display: block; 
} 

.rb { 
/*hide default outline*/ 
    outline: none; 
} 

[type=radio]:not(:hover):not(:active):focus { 
    /*set custom focus ring instead via box-shadow*/ 
    box-shadow: 1px 0 1px #c5c3c3 inset, -1px 1px 1px #c5c3c3 inset, 0px 0px 0 2px #fff, 0px 0px 0 3px rgb(100, 149, 237); 
} 

Il cachera bague de mise au point sur le vol stationnaire et clic, mais l'afficher lorsque le bouton radio se mise au point via le clavier.

Voici lien vers JSFiddle

Il y a aussi une proposition de ce genre de chose appelée accent anneau (uniquement implémenté dans Firefox, mais il est polyfill pour cela.