javascript - quitar - jQuery perder evento de enfoque

quitar focus jquery

Question

Estoy tratando de mostrar un contenedor si un campo de entrada se enfoca y, ese es el problema, oculte el contenedor si se pierde el foco. ¿Hay algún evento opuesto para jQuery?

Algún código de ejemplo:

<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>

Y lo que me gustaría hacer es algo como esto:

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

Answer 1

Me gusta esto:

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

Answer 2

Si las ''Opciones interesantes'' están ocultas de la vista antes de que el campo esté enfocado, desearía crear esto en JQuery en lugar de tenerlo en el DOM para que cualquier persona que use un lector de pantalla no vea información innecesaria. ¿Por qué deberían tener que escucharlo cuando no tenemos que verlo?

Para que puedas configurar variables así:

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

y luego añadir (o anteponer) en foco

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

y luego quitar cuando el enfoque termina

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

Answer 3

Usa el evento de blur para llamar a tu función cuando el elemento pierde el foco:

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

Answer 4

Utilice "borroso": blur

Answer 5

evento borroso: cuando el elemento pierde el foco.

Evento de enfoque: cuando el elemento, o cualquier elemento dentro de él, pierde el foco.

Como no hay nada dentro del elemento de filtro, tanto el desenfoque como el enfoque funcionarán en este caso.

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

jsfiddle con desenfoque: http://jsfiddle.net/yznhb8pc/

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

jsfiddle con enfoque: http://jsfiddle.net/yznhb8pc/1/