js怎么获取当前focus控件

JS 如何获取当前 Focus 控件

获取当前 Focus 控件的方法有：document.activeElement、使用事件监听器、结合 jQuery。其中，最常用也是最简便的方法是使用 document.activeElement。这是因为该属性能够直接返回当前页面中获得焦点的元素。接下来，我们将详细介绍这三种方法。

一、document.activeElement

document.activeElement 是一个只读属性，它返回当前文档中获得焦点的元素。如果没有元素获得焦点，则返回 body 或 null。这使得它成为获取当前焦点控件的最直接和最常用的方法。

示例代码：

document.addEventListener('click', function() {
    let focusedElement = document.activeElement;
    console.log(focusedElement);
});

在这个示例中，添加了一个点击事件监听器，每次点击页面时都会打印当前获得焦点的元素。

二、使用事件监听器

另一种获取当前焦点控件的方法是通过事件监听器，如 focus 和 blur 事件。这种方法可以在元素获得或失去焦点时触发特定的操作。

示例代码：

let focusedElement = null;
document.addEventListener('focus', function(event) {
    focusedElement = event.target;
    console.log(focusedElement);
}, true);
document.addEventListener('blur', function(event) {
    focusedElement = null;
    console.log('No element is focused');
}, true);

在这个示例中，我们使用了事件捕获的方式（第三个参数为 true），确保事件在向上传递之前首先被捕获。这样可以确保我们在最早的时刻获取到焦点元素。

三、结合 jQuery

如果你的项目中已经引入了 jQuery，那么可以借助 jQuery 的事件处理机制更加简便地获取当前焦点控件。

示例代码：

$(document).on('focus', ':input', function() {
    console.log($(this));
});

在这个示例中，我们使用了 jQuery 的 on 方法来监听所有输入元素的 focus 事件，并在元素获得焦点时输出该元素。

四、实际应用场景

1、表单验证

在表单验证过程中，获取当前焦点控件可以帮助我们实时检测用户输入，并在必要时提供即时反馈。比如，当用户输入不符合要求时，可以在当前焦点控件附近显示错误提示信息。

2、动态样式调整

有时候，我们需要根据用户的操作动态调整样式，比如当输入框获得焦点时改变其边框颜色。通过获取当前焦点控件，可以很方便地实现这些动态效果。

3、键盘导航

在一些复杂的单页应用中，用户可能需要通过键盘进行导航。获取当前焦点控件可以帮助我们确定用户当前的位置，从而实现更好的键盘导航体验。

五、综合示例

以下是一个综合示例，展示了如何在实际应用中使用 document.activeElement 和事件监听器来实现动态样式调整和表单验证。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Focus Example</title>
    <style>
        .focused {
            border: 2px solid blue;
        }
        .error {
            border: 2px solid red;
        }
        .tooltip {
            display: none;
            position: absolute;
            background: #f2dede;
            color: #a94442;
            padding: 5px;
            border: 1px solid #ebccd1;
            border-radius: 3px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <form id="exampleForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <span class="tooltip" id="usernameTooltip">Username is required</span>
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <span class="tooltip" id="emailTooltip">Please enter a valid email address</span>
        <br><br>
        <input type="submit" value="Submit">
    </form>
    <script>
        document.addEventListener('focus', function(event) {
            if (event.target.tagName === 'INPUT') {
                event.target.classList.add('focused');
            }
        }, true);
        document.addEventListener('blur', function(event) {
            if (event.target.tagName === 'INPUT') {
                event.target.classList.remove('focused');
                validateInput(event.target);
            }
        }, true);
        function validateInput(inputElement) {
            let tooltipId = inputElement.id + 'Tooltip';
            let tooltip = document.getElementById(tooltipId);
            if (inputElement.value === '') {
                inputElement.classList.add('error');
                tooltip.style.display = 'inline';
            } else {
                inputElement.classList.remove('error');
                tooltip.style.display = 'none';
            }
        }
    </script>
</body>
</html>

在这个示例中，我们创建了一个简单的表单，包含用户名和邮箱输入框。当输入框获得焦点时，我们为其添加一个蓝色边框；当失去焦点时，我们移除该边框并进行验证。如果输入框为空，则显示错误提示信息并添加红色边框。

通过以上内容，我们详细介绍了三种获取当前焦点控件的方法，以及它们在实际应用中的场景和综合示例。希望这些内容能帮助你在项目中更好地处理焦点控件相关的问题。

js怎么获取当前focus控件

JS 如何获取当前 Focus 控件

一、document.activeElement

示例代码：

二、使用事件监听器

示例代码：

三、结合 jQuery

示例代码：

四、实际应用场景

1、表单验证

2、动态样式调整

3、键盘导航

五、综合示例

相关问答FAQs：