jQuery perdre de vue l'objectif de l'événement

J'essaie de montrer un conteneur si un champ de saisie obtient le focus et - ce qui est le problème réel - masquer le conteneur si le focus est perdu. Est-il un en face de l'événement pour jQuery accent?

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 j'aime faire, c'est quelque chose comme ceci:

$('#filter').focus_lost(function() {
  $('#options').hide();
});
InformationsquelleAutor xijo | 2009-09-14
  1. 411

    Utilisation flou événement pour appeler votre fonction lors de l'élément perd le focus : 

    $('#filter').blur(function() {
  $('#options').hide();
});
    • que faire si le navigateur comme chrome auto remplir la zone de texte, je ne pense pas qu'il va déclencher l'blur()
    InformationsquelleAutor Canavar
  2. 40

    Comme ceci: 

    $(selector).focusout(function () {
    //Your Code
});
    • quelle est la différence de ce blur?
    • La méthode du flou est utilisé pour enlever le focus (c'est à dire les non-courant) de l'objet auquel il appartient. Donnant un champ de texte le flou de déplacer le curseur dans le champ suivant. Donner une fenêtre de l'effet de flou passez derrière tous les autres. Ce n'est pas un mot réservé de sorte que vous pouvez déclarer votre variable ou une fonction appelée flou, mais si vous le faites alors vous ne serez pas en mesure d'utiliser cette méthode pour le contrôle de l'objet qui est en cours.
    • La méthode focus est utilisé pour donner le focus (c'est à dire faire le courant) de l'objet auquel il appartient. Donnant un champ de texte, l'accent sera déplacez le curseur jusqu'au champ. Donner une fenêtre, l'accent sera déplacer dans avant de tous les autres. Des actes qui ne sont pas de spécifier un objet à utiliser celui qui a le focus. Ce n'est pas un mot réservé de sorte que vous pouvez déclarer votre variable ou une fonction appelée, mais si vous le faites alors vous ne serez pas en mesure d'utiliser cette méthode pour le contrôle de l'objet qui est en cours.
    • SoftwareARM l'explication n'a pas beaucoup de sens pour moi à la première lecture, j'ai donc trouvé une autre explication sur jQuery est la page de documentation (api.jquery.com/focusout) je pensais qu'elle serait utile à d'autres: La focusout événement est envoyé à un élément, ou d'un élément à l'intérieur d'elle, perd le focus. Elle est distincte de l'effet de flou de l'événement en ce qu'elle prend en charge la détection de la perte de concentration d'éléments parent (en d'autres mots, il prend en charge de remontée d'événements).
    InformationsquelleAutor SoftwareARM
  4. 8

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

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

    Comme il n'y a rien à l'intérieur de l'élément de filtre, à la fois flou et focusout travailleront dans ce cas. 

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

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

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

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

    • Ce doit être la accepté de répondre à
    InformationsquelleAutor Razan Paul
  5. 0

    Si " Cool Options sont cachés de la vue avant de le champ est porté ensuite, vous voulez pour créer cette de JQuery au lieu de l'avoir dans les DOM afin que toute personne utilisant un lecteur d'écran ne serait pas voir les informations inutiles. Pourquoi devraient-ils avoir à écouter quand nous n'avons pas à le voir?

    De sorte que vous pouvez configurer les variables comme ceci:

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

    puis d'en ajouter (ou préfixe) sur focus

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

    puis retirez lorsque le focus se termine

    $("input[name='input_name']").focusout(function() {
    $('#options').remove();
});
    InformationsquelleAutor Sprose