web-dev-qa-db-fra.com

blur event.relatedTarget renvoie null

J'ai un champ <input type="text"> Et je dois l'effacer lorsque ce champ perd le focus (ce qui signifie que l'utilisateur a cliqué quelque part sur la page). Mais il y a une exception. Le champ de texte ne doit pas être effacé lorsque l'utilisateur clique sur un élément spécifique.

J'ai essayé d'utiliser event.relatedTarget Pour détecter si l'utilisateur cliquait non seulement quelque part mais sur mon <div> Spécifique.

Cependant, comme vous pouvez le voir dans l'extrait ci-dessous, cela ne fonctionne tout simplement pas. event.relatedTarget Renvoie toujours null!

function lose_focus(event) {
  if(event.relatedTarget === null) {
    document.getElementById('text-field').value = '';
  }
}
.special {
  width: 200px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  margin: 25px 0;
  padding: 15px;
}
.special:hover {
  cursor: pointer;
}
<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">

<div class="special">Clicking here should not cause clearing!</div>
javascripteventsonblurlost-focusfocusout
28
CMTV

Réponse courte: ajoutez tabindex="0" attribut à un élément qui devrait apparaître dans event.relatedTarget.

Explication: event.relatedTarget contient un élément qui gagné focus. Et le problème est que votre spécifique div ne peut pas obtenir un focus car le navigateur pense que cet élément n'est pas un bouton/champ ou une sorte d'élément de contrôle.

Voici les éléments qui peuvent gagner le focus par défaut:

  • <a> éléments avec l'attribut href spécifié
  • <link> éléments avec l'attribut href spécifié
  • <button> éléments
  • <input> éléments qui ne sont pas hidden
  • <select> éléments
  • <textarea> éléments
  • <menuitem> éléments
  • éléments avec attribut draggable
  • <audio> et <video> éléments avec l'attribut controls spécifié

Donc event.relatedTarget contiendra les éléments ci-dessus lorsque onblur se produira. Tous les autres éléments ne seront pas comptés et en cliquant dessus, vous mettrez null dans event.relatedTarget.

Mais il est possible de changer ce comportement. Vous pouvez "marquer" l'élément DOM comme élément qui peut gagner le focus avec l'attribut tabindex. Voici ce que dit standart:

L'attribut de contenu tabindex permet aux auteurs d'indiquer qu'un élément est censé être focusable, s'il est censé être accessible à l'aide de la navigation par focus séquentiel et, éventuellement, de suggérer où dans l'ordre de navigation par focus séquentiel l'élément apparaît.

Voici donc l'extrait de code corrigé:

function lose_focus(event) {
  if(event.relatedTarget === null) {
    document.getElementById('text-field').value = '';
  }
}
.special {
  width: 200px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  margin: 25px 0;
  padding: 15px;
}
.special:hover {
  cursor: pointer;
}
<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">

<div tabindex="0" class="special">Clicking here should not cause clearing!</div>
39
CMTV