我试图显示一个容器，如果一个输入字段得到的焦点-这是实际的问题-隐藏容器，如果焦点丢失。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();
});
模糊事件:当元素失去焦点时。
Focusout事件:当元素或其中的任何元素失去焦点时。
由于滤镜元素内部什么都没有，在这种情况下，模糊和聚焦都可以工作。
$(function() {
$('#filter').blur(function() {
$('#options').hide();
});
})
Jsfiddle with blur: http://jsfiddle.net/yznhb8pc/
$(function() {
$('#filter').focusout(function() {
$('#options').hide();
});
})
使用focusout的Jsfiddle: http://jsfiddle.net/yznhb8pc/1/
如果“Cool Options”在字段聚焦之前从视图中隐藏，那么你会希望在JQuery中创建它，而不是在DOM中，这样任何使用屏幕阅读器的人都不会看到不必要的信息。为什么他们要听而我们却不需要看呢?
你可以像这样设置变量:
var $coolOptions= $("<div id='options'></div>").text("Some cool options");
然后在焦点上追加(或prepend)
$("input[name='input_name']").focus(function() {
$(this).append($coolOptions);
});
当焦点结束时再移除
$("input[name='input_name']").focusout(function() {
$('#options').remove();
});
