jQuery kehilangan fokus acara

Saya mencoba menampilkan wadah jika bidang input mendapatkan fokus dan - itulah masalah sebenarnya - sembunyikan wadah jika fokus hilang. Apakah ada acara yang berlawanan untuk fokus jQuery?

Beberapa contoh kode:

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

Dan yang ingin saya lakukan adalah sesuatu seperti ini:

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

Gunakan acara blur untuk memanggil fungsi Anda ketika elemen kehilangan fokus:

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

Seperti ini:

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

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

acara blur: saat elemen kehilangan fokus.

acara focusout: ketika elemen, atau elemen apa pun di dalamnya, kehilangan fokus.

Karena tidak ada apa pun di dalam elemen filter, baik blur maupun fokus akan berfungsi dalam kasus ini.

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

jsfiddle with blur: http://jsfiddle.net/yznhb8pc/

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

jsfiddle dengan fokus: http://jsfiddle.net/yznhb8pc/1/

Jika 'Pilihan Keren' disembunyikan dari tampilan sebelum bidang difokuskan maka Anda ingin membuatnya di JQuery alih-alih memilikinya di DOM sehingga siapa pun yang menggunakan pembaca layar tidak akan melihat informasi yang tidak perlu. Mengapa mereka harus mendengarkannya ketika kita tidak harus melihatnya?

Jadi, Anda dapat mengatur variabel seperti:

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

dan kemudian tambahkan (atau tambahkan) fokus

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

dan kemudian hapus ketika fokus berakhir

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