jQuery 如何使用jQuery获取焦点元素

在本文中，我们将介绍如何使用jQuery获取当前获得焦点的元素。在编写JavaScript代码时，经常需要知道用户当前正在与页面上的哪个元素进行交互。通过使用jQuery的相关方法，我们可以轻松地获取到当前获得焦点的元素。

1. 使用:focus选择器获取焦点元素

jQuery提供了一个特殊的选择器:focus用于获取当前获得焦点的元素。可以像下面这样使用它：

var focusedElement = $(":focus");

上述代码将返回在页面中获得焦点的元素，无论是输入框、按钮还是其他可接收用户交互的元素。

2. 监听焦点变化事件

除了使用:focus选择器之外，我们还可以通过监听焦点事件来获取获得焦点的元素。jQuery提供了focusin和focusout事件，可以用来监听元素获得和失去焦点的情况。

$(document).on("focusin", function(event) {
  var focusedElement = $(event.target);
  console.log("当前获得焦点的元素是：" + focusedElement);
});

上述代码将在页面中任意一个元素获得焦点时触发回调函数，并将获得焦点的元素赋值给变量focusedElement。你可以根据实际需求，使用console.log()方法将该元素输出到控制台。

3. 实时获取焦点元素示例

下面是一个实时获取焦点元素的示例，演示了如何在页面中的输入框中显示当前获得焦点的元素的ID。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input id="input1" type="text" placeholder="输入框1" />
  <input id="input2" type="text" placeholder="输入框2" />
  <input id="input3" type="text" placeholder="输入框3" />

  <script>
     $(document).on("focusin", function(event) { var focusedElement =$ (event.target);
      var focusedElementId = focusedElement.attr("id");
      $("body").append("<div>当前获得焦点的元素ID是：" + focusedElementId + "</div>");
    });
  </script>
</body>
</html>

在上述示例中，我们通过监听focusin事件获取获得焦点的元素，并通过attr()方法获取其ID，最后将其显示在页面上。当我们点击或通过键盘操作来切换输入框时，页面会实时更新显示当前获得焦点元素的ID。