jQuery pierde evento de enfoque

253

Estoy tratando de mostrar un contenedor si un campo de entrada obtiene el foco y, ese es el problema real, ocultar el contenedor si se pierde el foco. ¿Hay un evento opuesto para el enfoque de 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();
});
javascript jquery javascript-events focus xijo
fuente

Respuestas:

419

Use el evento de desenfoque para llamar a su función cuando el elemento pierde el foco:

$('#filter').blur(function() {
  $('#options').hide();
});
Canavar
fuente
3
¿Qué pasa si el navegador como Chrome auto llenar el cuadro de texto, no creo que desencadene el desenfoque ()
pita
40

Me gusta esto: 

$(selector).focusout(function () {
    //Your Code
});
SoftwareARM
fuente
10
¿Cuál es la diferencia de esto a blur?
cregox
55
El método de desenfoque se utiliza para eliminar el foco (es decir, hacer no actual) el objeto al que pertenece. Al dar un campo de texto, el desenfoque moverá el cursor al siguiente campo. Dar una ventana borrosa la moverá detrás de todas las demás. Esta no es una palabra reservada, por lo que puede declarar su propia variable o función llamada desenfoque, pero si lo hace, no podrá utilizar este método para controlar qué objeto es actual.
SoftwareARM
2
El método de enfoque se utiliza para dar al foco (es decir, hacer actual) el objeto al que pertenece. Al dar un campo de texto, el foco moverá el cursor a ese campo. Darle el foco a una ventana la moverá frente a todas las demás. Acciones que no especifican un objeto particular para aplicar para usar el que tiene el foco. Esta no es una palabra reservada, por lo que puede declarar su propia variable o función llamada foco, pero si lo hace, no podrá usar este método para controlar qué objeto es actual.
SoftwareARM
25
La explicación de SoftwareARM no tenía mucho sentido para mí en la primera lectura, así que encontré una explicación alternativa en la página de documentación de jQuery ( api.jquery.com/focusout ) que pensé que sería útil para otros: el evento de enfoque se envía a un elemento cuando, o cualquier elemento dentro de él, pierde el foco. Esto es distinto del evento de desenfoque porque admite la detección de la pérdida de enfoque de los elementos principales (en otras palabras, admite el burbujeo de eventos).
Brad
12

evento de 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 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 focusout: http://jsfiddle.net/yznhb8pc/1/

Razan Paul
fuente
0

Si las 'Opciones geniales' están ocultas de la vista antes de que el campo esté enfocado, entonces querrá 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é deberían tener que escucharlo cuando no tenemos que verlo?

Para que pueda configurar variables de esta manera:

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

y luego anexar (o anteponer) en foco

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

y luego eliminar cuando termine el foco

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