Window : évènement blur

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Voir la compatibilité complète
En savoir plus

L'évènement blur est déclenché lorsque la fenêtre a perdu la sélection, par exemple lorsque l'utilisateur·ice déplace la sélection de la page vers la barre d'adresse. La sélection peut être sur la zone d'affichage du document ou sur un élément à l'intérieur de celle-ci.

L'opposé de blur est focus.

Cet évènement n'est pas annulable et ne se propage pas.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènement.

addEventListener("blur", (event) => { })

onblur = (event) => { }

HTML

html

<p id="log">Cliquez sur ce document pour lui donner la sélection.</p>

CSS

css

.paused {
  background: #dddddd;
  color: #555555;
}

JavaScript

const log = document.getElementById("log");

function pause() {
  document.body.classList.add("paused");
  log.textContent = "SÉLECTION PERDUE !";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "Ce document a la sélection. Cliquez en dehors du document pour la perdre.";
}

window.addEventListener("blur", pause);
window.addEventListener("focus", play);