jQuery | focusin() 与示例

简介

focusin是jQuery中的一个事件方法，用于监听一个元素获取焦点时触发的事件。与focus事件相比，focusin事件的区别在于它可以冒泡，即当元素的子元素获得焦点时也会触发该事件。

语法

$(selector).focusin(function)

selector：需要监听焦点事件的元素的选择器。

function：当元素获取焦点时触发的回调函数。

示例

HTML

<form>
  <label>
    姓名：
    <input type="text" name="name">
  </label>
  <label>
    电子邮件：
    <input type="email" name="email">
  </label>
  <label>
    密码：
    <input type="password" name="password">
  </label>
</form>

JavaScript

$("form").on("focusin", "input", function() {
  $(this).closest("label").addClass("active");
});

$("form").on("focusout", "input", function() {
  $(this).closest("label").removeClass("active");
});

CSS

label {
  display: block;
  margin-bottom: 10px;
}

input {
  padding: 5px;
}

label.active {
  border: 1px solid blue;
}

在上述示例中，我们监听了表单中所有input元素的focusin事件，当元素获取焦点时，根据其父级label元素添加active类，高亮显示该元素对应的输入框。同时，我们还监听了focusout事件，在元素失去焦点时移除active类。

效果图如下：

以上是jQuery | focusin() 与示例的介绍，希望对您有所帮助。