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();
});

ใช้เหตุการณ์เบลอเพื่อเรียกใช้ฟังก์ชันของคุณเมื่อองค์ประกอบสูญเสียโฟกัส:

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

แบบนี้:

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

ใช้ "blur": http://docs.jquery.com/Events/blur#fn

เหตุการณ์เบลอ:เมื่อองค์ประกอบหมดโฟกัส

เหตุการณ์ focusout:เมื่อองค์ประกอบหรือองค์ประกอบใด ๆ ในนั้นสูญเสียโฟกัส

เนื่องจากไม่มีสิ่งใดอยู่ภายในองค์ประกอบตัวกรองทั้งความเบลอและการโฟกัสจะทำงานในกรณีนี้

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

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

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

jsfiddle พร้อม focusout: http://jsfiddle.net/yznhb8pc/1/

หาก 'ตัวเลือกสุดเจ๋ง' ถูกซ่อนไว้จากมุมมองก่อนที่จะมีการโฟกัสฟิลด์คุณจะต้องสร้างสิ่งนี้ใน JQuery แทนที่จะมีไว้ใน DOM เพื่อให้ทุกคนที่ใช้โปรแกรมอ่านหน้าจอไม่เห็นข้อมูลที่ไม่จำเป็น ทำไมพวกเขาต้องฟังมันเมื่อเราไม่ต้องเห็นมัน?

ดังนั้นคุณสามารถตั้งค่าตัวแปรดังนี้:

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();
});