jQuery는 초점 이벤트를 잃는다

입력 필드에 포커스가 있으면 컨테이너를 표시하려고하는데 실제 문제입니다. 포커스가 손실되면 컨테이너를 숨기십시오. jQuery의 초점에 반대되는 이벤트가 있습니까?

예제 코드 :

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

그리고 내가하고 싶은 것은 다음과 같습니다.

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

요소가 포커스를 잃을 때 blur 이벤트를 사용 하여 함수를 호출하십시오.

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

이처럼 :

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

"blur"를 사용하십시오 : http://docs.jquery.com/Events/blur#fn

블러 이벤트 : 요소가 포커스를 잃을 때.

포커스 아웃 이벤트 : 요소 또는 그 안의 요소가 포커스를 잃을 때

필터 요소 안에는 아무것도 없으므로이 경우 흐림과 초점이 ​​모두 작동합니다.

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

흐림 효과가있는 jsfiddle : http://jsfiddle.net/yznhb8pc/

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

포커스 아웃이있는 jsfiddle : http://jsfiddle.net/yznhb8pc/1/

'Cool Options'가 필드에 초점을 맞추기 전에 뷰에서 숨겨져 있으면 DOM에서 가져 오는 대신 JQuery에서이를 생성하여 화면 판독기를 사용하는 사람은 불필요한 정보를 볼 수 없습니다. 우리가 그것을 볼 필요가 없을 때 왜들을 수 있어야합니까?

따라서 다음과 같이 변수를 설정할 수 있습니다.

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

그리고 초점에 덧붙이거나

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

초점이 끝나면 제거

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