欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery中focusin与focusout的使用详解

程序员文章站 2022-03-30 11:09:50
...

jquery 的focusin和focusout方法的使用

focusin(fn)

概述

在每一个匹配元素的focusin事件中绑定一个处理函数
当一个元素,或者其内部任何一个元素获得焦点的时候会触发这个事件。这跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。

参数
fnFunction在每一个匹配元素的focusin事件中绑定的处理函数。
示例
描述:
获得焦点后会触发动画:

HTML 代码:

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>jQuery 代码:
$("p").focusin(function() {
  $(this).find("span").css('
display
','inline').fadeOut(1000);
});

focusout(fn)
概述
在每一个匹配元素的focusout事件中绑定一个处理函数。

当一个元素,或者其内部任何一个元素失去焦点的时候会触发这个事件。这跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。

参数
fnFunction在每一个匹配元素的focusout事件中绑定的处理函数。

示例
描述:
失去焦点后会触发动画:
HTML 代码:

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>jQuery 代码:
$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

以上就是jquery中focusin与focusout的使用详解的详细内容,更多请关注其它相关文章!