jQuery mất sự kiện tập trung

Tôi đang cố gắng hiển thị một container nếu trường đầu vào lấy tiêu điểm và - đó là vấn đề thực tế - ẩn container nếu mất tiêu điểm. Có một sự kiện ngược lại cho trọng tâm của jQuery không?

Một số mã ví dụ:

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

Và những gì tôi muốn làm là một cái gì đó như thế này:

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

Sử dụng sự kiện mờ để gọi chức năng của bạn khi phần tử mất tiêu điểm:

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

Như thế này:

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

Sử dụng "làm mờ": http://docs.jquery.com/Events/blur#fn

sự kiện mờ: khi yếu tố mất tập trung.

sự kiện tập trung: khi phần tử, hoặc bất kỳ phần tử nào bên trong nó, mất tiêu điểm.

Vì không có gì bên trong phần tử bộ lọc, cả mờ và tiêu cự sẽ hoạt động trong trường hợp này.

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

jsfiddle có mờ: http://jsfiddle.net/yznhb8pc/

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

jsfiddle với tiêu điểm: http://jsfiddle.net/yznhb8pc/1/

Nếu 'Tùy chọn tuyệt vời' bị ẩn khỏi chế độ xem trước khi trường được tập trung thì bạn sẽ muốn tạo tùy chọn này trong JQuery thay vì có nó trong DOM để bất kỳ ai sử dụng trình đọc màn hình sẽ không thấy thông tin không cần thiết. Tại sao họ phải nghe nó khi chúng ta không phải xem nó?

Vì vậy, bạn có thể thiết lập các biến như vậy:

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

và sau đó nối thêm (hoặc trả trước) vào trọng tâm

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

và sau đó loại bỏ khi tiêu điểm kết thúc

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