Javascript获取当前焦点

原创

mob64ca12d61d6b 2024-01-08 07:14:42 ©著作权

文章标签 输入框标签名类名 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d61d6b的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript获取当前焦点

在网页开发中，我们经常需要与用户交互，其中一个重要的功能就是获取当前焦点。通过获取当前焦点，我们可以知道用户正在与哪个元素进行交互，从而进行相应的处理。本文将介绍如何使用JavaScript获取当前焦点，并提供相关的代码示例。

什么是焦点

在网页中，焦点是指用户当前正在与之交互的元素，例如输入框、按钮等。当用户点击一个元素或者通过键盘进行操作时，该元素就会获得焦点。通过获取当前焦点，我们可以获取到用户正在操作的元素，从而实现一些自定义的交互效果。

如何获取当前焦点

要获取当前焦点，我们可以使用JavaScript提供的document.activeElement属性。该属性返回当前页面中获得焦点的元素。

下面是一个简单的示例，展示如何使用document.activeElement获取当前焦点的元素。

// 获取当前焦点的元素
var activeElement = document.activeElement;

// 输出当前焦点的元素的标签名
console.log(activeElement.tagName);

在上面的代码中，我们首先通过document.activeElement获取到当前焦点的元素，然后使用console.log()将该元素的标签名输出到控制台。

代码示例

下面是一个更完整的示例，展示了如何通过获取当前焦点来实现一些交互效果。

<!DOCTYPE html>
<html>
<head>
    <title>获取当前焦点示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="text" id="input1" placeholder="输入框1">
    <input type="text" id="input2" placeholder="输入框2">
    <button id="button">按钮</button>

    <script>
        // 为所有输入框添加焦点事件监听器
        var inputs = document.querySelectorAll('input');
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener('focus', function (event) {
                // 获取焦点的输入框添加highlight类名
                event.target.classList.add('highlight');
            });

            inputs[i].addEventListener('blur', function (event) {
                // 失去焦点的输入框移除highlight类名
                event.target.classList.remove('highlight');
            });
        }

        // 获取当前焦点的按钮
        var button = document.getElementById('button');
        button.addEventListener('click', function () {
            var activeElement = document.activeElement;
            alert('当前焦点的元素是：' + activeElement.tagName);
        });
    </script>
</body>
</html>

在上面的示例中，我们首先为所有的输入框添加了焦点事件的监听器。当输入框获得焦点时，会为其添加一个名为highlight的类，使其背景色变为黄色。当输入框失去焦点时，会移除该类名，恢复原先的样式。

同时，我们还为一个按钮添加了点击事件的监听器。当用户点击按钮时，会弹出一个对话框，显示当前获得焦点的元素的标签名。