JS 寻找页面聚焦的元素|极客教程

JS 寻找页面聚焦的元素

在网页设计与开发中，经常需要针对用户的操作行为进行相应的处理。其中一个比较常见的需求是寻找当前页面中被用户聚焦的元素，以便进行相应的处理，比如表单验证、动态效果等。在本文中，我们将详细介绍如何使用 JavaScript 来实现这一功能。

通过 document.activeElement 属性获取聚焦元素

在 JavaScript 中，我们可以通过 document.activeElement 属性来获取当前页面上被聚焦的元素。该属性会返回一个指向当前获得焦点的元素的引用，如果没有元素获得焦点，则返回 <body> 元素。

下面是一个简单的示例代码，演示如何通过 document.activeElement 属性获取到当前聚焦的元素：

document.addEventListener('focusin', function() {
  const focusedElement = document.activeElement;
  console.log('当前聚焦的元素是：', focusedElement);
});

document.addEventListener('focusout', function() {
  console.log('焦点已离开当前元素');
});

在上面的代码中，我们通过 addEventListener 方法监听了 focusin 事件和 focusout 事件。当页面上的元素获得焦点时，会输出当前聚焦的元素，而当焦点离开元素时，则会输出提示信息。

实际应用示例

接下来，我们将通过一个实际的应用示例来展示如何利用上述方法实现一些常见的交互效果。我们将创建一个简单的登录表单，当用户在输入框中输入信息时，会动态显示当前聚焦的输入框。

首先，我们需要在 HTML 中创建一个简单的登录表单：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录表单</title>
</head>
<body>
  <form id="login-form">
    <label for="username">用户名：</label>
    <input type="text" id="username">
    <label for="password">密码：</label>
    <input type="password" id="password">
  </form>

  <script src="app.js"></script>
</body>
</html>

然后，我们在 JavaScript 文件 app.js 中编写代码，实现动态显示当前聚焦的输入框：

const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
  input.addEventListener('focus', function() {
    this.classList.add('focused');
  });

  input.addEventListener('blur', function() {
    this.classList.remove('focused');
  });
});

在上面的代码中，我们首先通过 document.querySelectorAll('input') 获取到所有的输入框元素，然后遍历每一个输入框，分别给每个输入框添加 focus 和 blur 事件监听器。当输入框获得焦点时，给对应的输入框添加一个名为 focused 的类，从而实现动态显示当前聚焦的输入框。

最后，我们可以在 CSS 文件中设置 .focused 类的样式，以实现相应的效果：

input.focused {
  border-color: #007bff;
  box-shadow: 0 0 5px #007bff;
}

通过以上步骤，我们成功实现了一个简单的登录表单，在用户输入信息时动态显示当前聚焦的输入框，并添加了相应的样式效果。

结语

通过本文的介绍，我们了解了如何使用 JavaScript 来寻找页面中被用户聚焦的元素，并通过一个实际的示例演示了如何应用这一功能。在实际开发中，借助这一方法，我们可以更好地响应用户的操作行为，同时实现更灵活、交互效果更好的网页设计。

JS 寻找页面聚焦的元素