Zdarzenie jQuery traci fokus

253

Próbuję wyświetlić kontener, jeśli pole wejściowe zostanie aktywowane i - to jest faktyczny problem - ukryj kontener, jeśli fokus zostanie utracony. Czy dla jQuery istnieje coś przeciwnego?

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>

Chciałbym zrobić coś takiego:

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

— Xijo
źródło

419

Użyj zdarzenia rozmycia , aby wywołać funkcję, gdy element traci fokus:

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

— Canavar
źródło

3

co jeśli przeglądarka jak chrom auto wypełnić pole tekstowe, nie sądzę, będzie to powodować rozmycie ()

— pita

40

Lubię to:

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

— SoftwareARM
źródło

10

jaka jest od tego różnica blur?

— cregox

5

Metoda rozmycia służy do usunięcia skupienia (tj. Uczynienia nieprądowym) obiektu, do którego należy. Nadanie pola tekstowego rozmyciu spowoduje przeniesienie kursora do następnego pola. Rozmycie okna spowoduje przesunięcie go za wszystkie pozostałe. To nie jest słowo zastrzeżone, więc możesz zadeklarować własną zmienną lub funkcję o nazwie rozmycie, ale jeśli to zrobisz, nie będziesz mógł użyć tej metody do kontrolowania, który obiekt jest aktualny.

— SoftwareARM

2

Metoda fokusu jest używana do nadania fokusowi (tj. Uczynienia aktualnym) obiektu, do którego należy. Podanie pola tekstowego spowoduje przeniesienie kursora do tego pola. Dając okno fokus przesunie go przed wszystkimi innymi. Działania, które nie określają konkretnego obiektu do zastosowania, aby użyć tego, który ma fokus. To nie jest słowo zastrzeżone, więc możesz zadeklarować własną zmienną lub funkcję o nazwie focus, ale jeśli to zrobisz, nie będziesz mógł użyć tej metody do kontrolowania, który obiekt jest aktualny.

— SoftwareARM

25

Wyjaśnienie SoftwareARM nie miało dla mnie większego sensu przy pierwszym czytaniu, więc znalazłem alternatywne wyjaśnienie na stronie dokumentacji jQuery ( api.jquery.com/focusout ), które moim zdaniem byłoby pomocne dla innych: Zdarzenie focusout jest wysyłane do elementu gdy on lub jakikolwiek element w nim traci skupienie. Różni się to od zdarzenia rozmycia tym, że obsługuje wykrywanie utraty ostrości przez elementy macierzyste (innymi słowy, obsługuje propagację zdarzeń).

— Brad

33

Użyj „rozmycia”: http://docs.jquery.com/Events/blur#fn

— NVRAM
źródło

12

zdarzenie rozmycia: gdy element traci skupienie.

zdarzenie focusout: gdy element lub jakikolwiek element w nim traci skupienie.

Ponieważ wewnątrz elementu filtrującego nie ma nic, zarówno rozmycie, jak i fokus będą działać w tym przypadku.

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

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

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

jsfiddle with focusout: http://jsfiddle.net/yznhb8pc/1/

— Razan Paul
źródło

0

Jeśli „Fajne opcje” są ukryte przed widokiem, zanim pole zostanie zogniskowane, powinieneś utworzyć to w JQuery zamiast mieć to w DOM, aby nikt korzystający z czytnika ekranu nie widział niepotrzebnych informacji. Dlaczego mieliby go słuchać, skoro nie musimy tego widzieć?

Możesz więc ustawić takie zmienne:

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

a następnie dodaj (lub dodaj) na fokus

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

a następnie usuń po zakończeniu fokusa

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

— Sprose
źródło