jQuery失去焦点事件

2020/10/09 19:01 · javascript ·  · 0评论

如果输入字段获得焦点,我正在尝试显示一个容器,这是实际的问题,如果失去焦点,则隐藏该容器。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 :
//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/

如果在焦点集中字段之前从视图中隐藏了“酷选项”,则您想在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();
});
本文地址:http://javascript.askforanswer.com/jqueryshiqujiaodianshijian.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!