j쿼리 포커스 상실 이벤트

j쿼리 포커스 상실 이벤트

입력 필드에 포커스가 잡히면 컨테이너를 표시하고 포커스가 잡히지 않으면 컨테이너를 숨기려고 합니다.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
});

"http://http://docs.jquery.com/Events/blur#fn"을 사용합니다.

흐림 이벤트: 요소가 포커스를 잃었을 때.

포커스아웃 이벤트: 요소 또는 요소 내부의 요소가 포커스를 잃었을 때.

필터 요소에는 아무것도 없기 때문에, 이 경우는 흐림이나 포커스 아웃이 모두 동작합니다.

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

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

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

jsfiddle (포커스아웃 포함):http://jsfiddle.net/yznhb8pc/1/

필드에 초점을 맞추기 전에 보기에서 '쿨 옵션'이 숨겨져 있는 경우, 화면 판독기를 사용하는 사용자가 불필요한 정보를 볼 수 없도록 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();
});

언급URL : https://stackoverflow.com/questions/1423561/jquery-lose-focus-event