Événement jQuery loss focus

253

J'essaie d'afficher un conteneur si un champ de saisie obtient le focus et - c'est le problème réel - de cacher le conteneur si le focus est perdu. Y a-t-il un événement opposé pour le focus de jQuery?

Un exemple de code:

<input type="text" value="" name="filter" id="filter"/>

<div id="options">some cool options</div>

<script type="text/javascript">
  $('#options').hide();

  $('#filter').focus(function() {
    $('#options').appear();
  });
</script>

Et ce que je voudrais faire, c'est quelque chose comme ça:

$('#filter').focus_lost(function() {
  $('#options').hide();
});
javascript jquery javascript-events focus xijo
la source

Réponses:

419

Utilisez l' événement flou pour appeler votre fonction lorsque l'élément perd le focus:

$('#filter').blur(function() {
  $('#options').hide();
});
Canavar
la source
3
que faire si le navigateur comme chrome auto remplit la zone de texte, je ne pense pas que cela déclenchera le flou ()
pita
40

Comme ça: 

$(selector).focusout(function () {
    //Your Code
});
SoftwareARM
la source
10
quelle est la différence avec cela blur?
cregox
5
La méthode du flou est utilisée pour supprimer le focus (c'est-à-dire rendre non courant) l'objet auquel il appartient. Si vous donnez un champ de texte, le flou déplacera le curseur vers le champ suivant. Donner une fenêtre au flou la déplacera derrière toutes les autres. Ce n'est pas un mot réservé, vous pouvez donc déclarer votre propre variable ou fonction appelée flou, mais si vous le faites, vous ne pourrez pas utiliser cette méthode pour contrôler quel objet est actuel.
SoftwareARM
2
La méthode de focus est utilisée pour donner au focus (c'est-à-dire rendre courant) l'objet auquel il appartient. Si vous donnez un champ de texte, le focus déplace le curseur sur ce champ. Si vous donnez à une fenêtre le focus, vous la déplacerez devant toutes les autres. Actions qui ne spécifient pas d'objet particulier à appliquer pour utiliser celui qui a le focus. Ce n'est pas un mot réservé, vous pouvez donc déclarer votre propre variable ou fonction appelée focus, mais si vous le faites, vous ne pourrez pas utiliser cette méthode pour contrôler quel objet est en cours.
SoftwareARM
25
L'explication de SoftwareARM n'avait pas beaucoup de sens pour moi à la première lecture, j'ai donc trouvé une autre explication sur la page de documentation de jQuery ( api.jquery.com/focusout ) que je pensais utile aux autres: l'événement de focusout est envoyé à un élément quand il, ou tout élément à l'intérieur, perd le focus. Ceci est distinct de l'événement de flou dans la mesure où il prend en charge la détection de la perte de focus des éléments parents (en d'autres termes, il prend en charge la propagation d'événements).
Brad
12

événement flou: lorsque l'élément perd le focus.

événement focusout: lorsque l'élément, ou tout élément à l'intérieur, perd le focus.

Comme il n'y a rien à l'intérieur de l'élément filtrant, le flou et la mise au point fonctionneront dans ce cas. 

$(function() {
  $('#filter').blur(function() {
    $('#options').hide();
  });
})

jsfiddle avec flou: http://jsfiddle.net/yznhb8pc/

$(function() {
  $('#filter').focusout(function() {
    $('#options').hide();
  });
})

jsfiddle avec focusout: http://jsfiddle.net/yznhb8pc/1/

Razan Paul
la source
0

Si les «Cool Options» sont masquées de la vue avant que le champ ne soit focalisé, alors vous voudrez le créer dans JQuery au lieu de l'avoir dans le DOM afin que toute personne utilisant un lecteur d'écran ne voie pas d'informations inutiles. Pourquoi devraient-ils l'écouter alors que nous n'avons pas à le voir?

Vous pouvez donc configurer des variables comme ceci:

var $coolOptions= $("<div id='options'></div>").text("Some cool options");

puis ajouter (ou pré-ajouter) sur le focus

$("input[name='input_name']").focus(function() {
    $(this).append($coolOptions);
});

puis retirez à la fin de la mise au point

$("input[name='input_name']").focusout(function() {
    $('#options').remove();
});
Épinette
la source