Javascript 查找具有焦点的元素

当我们想要获取当前页面中具有焦点的元素，可以使用Javascript中的document.activeElement方法来实现该功能。

示例代码

const focusedElement = document.activeElement;

代码解释

以上代码使用document.activeElement来获取当前具有焦点的DOM元素。该元素可以是表单元素、链接、按钮、甚至是document.body等，只要该元素在当前页面中被用户激活（即被点击或键盘聚焦），那么它就具有焦点。

示例应用场景

我们可以利用document.activeElement来确定用户正在与哪个元素进行交互，例如验证表单，根据用户输入的内容实时更新样式等等。

以下是一个简单的事件监听器，用于在用户输入时触发某些事件：

const input = document.querySelector('input[type="text"]');

input.addEventListener('input', () => {
  console.log(`输入框的值为：${input.value}`);
});

以上代码会监听文本输入框中的输入事件，并在控制台打印出用户输入的值。此时，如果用户输入时光标处于文本框中，那么document.activeElement将返回该文本框元素，我们就可以对该元素进行验证、样式更新等操作。

结论

通过使用document.activeElement方法，我们可以轻松地获取当前页面中具有焦点的元素。这在表单验证、交互设计等方面非常有用。