web-dev-qa-db-fra.com

jQuery perdre événement focus

J'essaie de montrer un conteneur si un champ de saisie obtient le focus et - c'est là le problème - masquer le conteneur si le focus est perdu. Existe-t-il un événement opposé pour le focus de jQuery?

Quelques exemples 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'aimerais faire est quelque chose comme ceci:

$('#filter').focus_lost(function() {
  $('#options').hide();
});
javascriptjqueryjavascript-eventsfocus
245
xijo

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

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

Comme ça:

$(selector).focusout(function () {
    //Your Code
});
40
SoftwareARM

Utilisez "flou": http://docs.jquery.com/Events/blur#fn

33
NVRAM

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

événement focusout: lorsque l'élément, ou l'un des éléments qu'il contient, perd le focus.

Comme il n’ya rien dans l’élément filtrant, le flou et la mise au point fonctionnent dans ce cas.

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

jsfiddle with blur: http://jsfiddle.net/yznhb8pc/

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

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

8
Razan Paul

Si les "Options de refroidissement" sont masquées dans la vue avant la focalisation du champ, vous souhaiterez créer cela dans JQuery au lieu de le placer dans le DOM afin que toute personne utilisant un lecteur d'écran ne voie pas les informations inutiles. Pourquoi devraient-ils l'écouter alors que nous n'avons pas à le voir?

Ainsi, vous pouvez configurer des variables comme suit:

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

puis ajoutez (ou ajoutez) sur le focus

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

puis retirez quand le focus se termine

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