jQuery traci fokus zdarzenia

Question

Próbuję pokazać kontener, jeśli pole wejściowe dostaje fokus i - to jest faktyczny problem - ukryj kontener, jeśli fokus zostanie utracony. Czy w przypadku jQuery'ego jest przeciwne wydarzenie?

Niektóre przykładowy kod:

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

A co chciałbym zrobić coś takiego:

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

Answer 1

Zastosowanie blur wydarzenie nazwać swoją funkcję, gdy elementem traci fokus:

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

Answer 2

Użyj "rozmycie": http://docs.jquery.com/Events/blur#fn

Answer 3

Jak to:

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

Answer 4

zdarzenie rozmycia: gdy element traci fokus.

fokus:, gdy element lub jakikolwiek jego element w środku traci ostrość.

Ponieważ nic nie znajduje się w filtrze, w tym przypadku zadziałają zarówno rozmycie, jak i fokus.

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

jsfiddle z rozmycia: http://jsfiddle.net/yznhb8pc/

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

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

Answer 5

jeśli 'Super Opcje' są ukryte przed wzrokiem przed pole skupia się wtedy chcesz utworzyć to w JQuery zamiast mieć go w DOM, więc każdy, kto używa czytnika ekranu, nie zobaczy niepotrzebnych informacji. Dlaczego mieliby go słuchać, gdy nie musimy tego oglądać?

Więc może zmienne konfiguracyjne tak:

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

a następnie dołączyć (lub poprzedzić) na ostrości

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

a następnie usunąć, gdy ostrość kończy

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