Comment effacer le focus en javascript?


159

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 n'importe quel élément sur lequel il se trouve sans savoir à l'avance sur quel élément se trouve le focus. Il doit fonctionner sur Firefox 2 ainsi que sur des navigateurs plus modernes.

Y at-il un bon moyen de le faire?


que signifie une mise au point claire? - est-ce la même chose que le flou?
plodder

3
Je veux faire en sorte qu'aucun élément du navigateur n'ait le focus.
Andres

Réponses:


170

Répondre: document.activeElement

Pour faire ce que vous voulez, utilisez document.activeElement.blur()

Si vous avez besoin de prendre en charge Firefox 2, vous pouvez également utiliser ceci:

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

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

8
Si Firefox 2, avec 0,66% de part de navigateur, est un facteur décisif ... J'ai un correctif, qui est dans ma réponse modifiée.
jps

21
En 2013, la part du navigateur de Firefox 2 est nettement inférieure à 0,66%, et le simple document.activeElement.blur()est le meilleur moyen d'obtenir cet effet.
chowey

88

.focus()et puis .blur()quelque chose d'autre arbitraire sur votre page. Étant donné qu'un seul élément peut avoir le focus, il est transféré vers cet élément puis supprimé.


Existe-t-il un moyen de créer un élément invisible qui a le focus?
Andres

1
Je ne suis pas un expert sur la meilleure façon de faire cela; mais vous pouvez certainement le positionner hors écran ou en dehors des limites d'un overflow: clipélément stylisé. Mais vous pouvez simplement utiliser un champ qui existe déjà sur la page. Ou créez-en un juste pour le but et supprimez-le à nouveau.
Kevin Reid

Je pense que définir le focus sur un élément hors écran forcera un défilement vers cet élément. Cependant, vous pouvez créer un élément invisible à cet effet. Cela étant dit, certains navigateurs peuvent avoir du mal à supprimer le curseur. Juste flou () fonctionnerait probablement mieux. Vous pouvez toujours obtenir des clés avec un gestionnaire d'événements keyup (keydown).
Alexis Wilke

5
Cette réponse est obsolète et ne s'applique pas en 2017. Utilisez plutôt activeElement, comme dans stackoverflow.com/a/2520670/39808
Paul Fisher

Cela fonctionne toujours, juste plus longtemps et déplace le focus (ce qui peut interférer avec la navigation TAB). De plus, ce qui devrait être "quelque chose d'autre arbitraire" n'est pas immédiatement évident.
user202729

50
document.activeElement.blur();

Fonctionne mal sur IE9 - il brouille toute la fenêtre du navigateur si l'élément actif est le corps du document. Mieux vaut vérifier ce cas:

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

C'est vrai, mais aujourd'hui, presque personne n'utilise plus IE9.
Donald Duck le

18

Aucune des réponses fournies ici n'est complètement correcte lors de l'utilisation de TypeScript, car vous ne connaissez peut-être pas le type d'élément sélectionné.

Ce serait donc préférable:

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

Je déconseillerais en outre d'utiliser la solution fournie dans la réponse acceptée, car le flou qui en résulte ne fait pas partie des spécifications officielles et pourrait se rompre à tout moment.


6
C'est amusant de voir comment une question que j'ai posée en 2010 continue d'évoluer.
Andres

2

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


0

Vous pouvez appeler window.focus ();

mais déplacer ou perdre le focus est lié à interférer avec quiconque utilise la touche de tabulation pour se déplacer dans la page.

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


-3

Avec jQuery c'est juste: $(this).blur();


2
C'est une vieille réponse, donc vous le savez peut-être maintenant, mais il y a deux raisons pour lesquelles cette réponse ne s'applique pas. 1. Il suppose que l'OP utilisait jquery, 2. thisdoit être l'élément focalisé, tandis que la question déclare explicitement que l'OP ne connaît pas l'élément focalisé à l'avance.
Brandon le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.