jQuery perder evento de foco

Question

Estoy tratando de mostrar un contenedor si un campo de entrada obtiene el foco y, ese es el problema real, esconde el contenedor si se pierde el foco. ¿Hay un evento opuesto para el enfoque de jQuery?

un 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

Uso blur evento para llamar a su función cuando el elemento pierde el foco:

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

Answer 2

Utilice "desenfoque": http://docs.jquery.com/Events/blur#fn

Answer 3

De esta manera:

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

Answer 4

caso desenfoque: 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 del filtro, tanto el desenfoque como el enfoque funcionarán en este caso.

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

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

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

jsFiddle con focusOut: http://jsfiddle.net/yznhb8pc/1/

Answer 5

Si los 'Cool Opciones' se ocultan de la vista antes de que el terreno se concentra entonces usted desea crear esto en JQuery en lugar de tenerlo en el DOM para que cualquiera que use un lector de pantalla no vea información innecesaria. ¿Por qué tendrían que escucharlo cuando no tenemos que verlo?

Para que pueda variables de configuración, así:

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

y luego añadir (o anteponer) en el foco

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

y luego retire cuando el foco termina

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