jQuery perde l'evento di messa a fuoco

Question

Sto provando a visualizzare un contenitore se un campo di input ottiene lo stato attivo e - questo è il problema reale - nasconde il contenitore se lo stato attivo viene perso. C'è un evento opposto per l'attenzione di jQuery?

qualche esempio di codice:

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

E quello che mi piacerebbe fare è qualcosa di simile:

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

Answer 1

Usa blur evento per chiamare la funzione quando l'elemento perde il focus:

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

Answer 2

Utilizzare "sfocatura": http://docs.jquery.com/Events/blur#fn

Answer 3

Ti piace questa:

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

Answer 4

sfocatura evento: quando l'elemento perde lo stato attivo.

evento di messa a fuoco: quando l'elemento o qualsiasi elemento all'interno di esso perde lo stato attivo.

Poiché non c'è nulla all'interno dell'elemento del filtro, in questo caso sia la sfocatura che lo sfocamento funzioneranno.

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

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

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

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

Answer 5

Se le 'Opzioni cool' sono nascosti dalla vista prima che il campo si concentra allora si vorrebbe creare questo in JQuery invece di averlo nel DOM in modo che chiunque usi uno screen reader non veda le informazioni non necessarie. Perché dovrebbero ascoltarlo quando non dobbiamo vederlo?

in modo da poter variabili di setup in questo modo:

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

e quindi aggiungere (o anteporre) sulla messa a fuoco

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

e quindi rimuovere quando il focus si conclude

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