web-dev-qa-db-fra.com

Comment effacer le focus en javascript?

Je sais que cela ne devrait pas être si difficile, mais je n'ai pas trouvé de réponse sur Google.

Je veux exécuter un morceau de javascript qui effacera le focus de l’élément sur lequel il est placé sans savoir à l’avance sur quel élément il se trouve. Il doit fonctionner sur Firefox 2 ainsi que sur des navigateurs plus modernes.

Y at-il un bon moyen de le faire?

javascriptfocus
136
Andres

Réponse: document.activeElement

---modifier----

Techniquement: document.activeElement.blur()

---- modifier 2 ----

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);
143
jps

.focus() puis .blur() autre chose d'arbitraire sur votre page. Comme un seul élément peut avoir le focus, il est transféré sur cet élément puis supprimé.

85
Kevin Reid
document.activeElement.blur();

Fonctionne mal sur IE9 - la fenêtre entière du navigateur s'estompe si l'élément actif est le corps du document. Mieux vaut vérifier pour ce cas:

if (document.activeElement != document.body) document.activeElement.blur();
44
pwnzor1337

Aucune des réponses fournies ici n’est tout à fait correcte lors de l’utilisation de TypeScript, car vous pourriez ne pas connaître le type d’élément sélectionné.

Ce serait donc préférable:

if (document.activeElement instanceof HTMLElement)
    document.activeElement.blur();

De plus, je déconseillerais d’utiliser la solution fournie dans la réponse acceptée, car le flou résultant ne fait pas partie des spécifications officielles et pourrait se rompre à tout moment.

3
user2976450

dummyElem.focus () où dummyElem est un objet caché (par exemple, a-t-il un zIndex négatif)?

3
plodder

Vous pouvez appeler window.focus ();

mais déplacer ou perdre le focus est inévitablement gênant pour quiconque utilise la touche de tabulation pour se déplacer sur la page.

vous pouvez écouter le code clé 13 et renoncer à l'effet si vous appuyez sur la touche de tabulation.

1
kennebec

si vous avez un menu supérieur avec une classe "active" dans un élément, vous pouvez l'utiliser:

$(".menu-header:first").find(".active").focus();

cela fonctionne pour le style de menu comme ceci:

<div class="menu-header" data-bind="invisible:isVisible">
                <ul class="nav navbar-nav navbar-header">
                    <li><a class="nv" href="/Home" id="home-menu"><span><i class="fa fa-home"></i></span>Hjem</a></li>
                    <li><a class="nv active" href="/nb-no/CV" id="cv-menu"><span><i class="fa fa-pencil-square-o"></i></span>CV</a></li>
                    <li><a class="nv" href="/myjobapps" id="app-menu"><span><i class="fa fa-files-o"></i></span>Søknader</a></li>
                    <li><a class="nv" href="/alladverts" id="jobs-menu"><span><i class="fa fa-search"></i></span>Jobber</a></li>
                    <li><a class="nv" href="/Options" id="option-menu"><span><i class="fa fa-Ellipsis-h"></i></span>Mer</a></li>
                </ul>
            </div>
0
Md. Tazbir Ur Rahman Bhuiyan