jquery 焦点转移

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。焦点转移（Focus Management）是指在用户界面中控制元素获取或失去焦点的过程。

类型

自动焦点转移：在页面加载或特定事件发生时，自动将焦点设置到某个元素上。
手动焦点转移：通过用户交互（如点击按钮）或程序逻辑，手动控制焦点的移动。
焦点陷阱：确保用户在特定区域内循环移动焦点，防止用户跳出该区域。

应用场景

表单验证：在用户输入时，自动将焦点移动到下一个或上一个输入框。
导航辅助：为键盘用户提供更好的导航体验，特别是在单页应用（SPA）中。
模态对话框：在打开模态对话框时，自动将焦点设置到对话框内的第一个可交互元素上。

示例代码

自动焦点转移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Focus Management</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="input1">
    <input type="text" id="input2">
    <script>
        $(document).ready(function() {
            $('#input1').focus(); // 页面加载时自动聚焦到 input1
        });
    </script>
</body>
</html>

手动焦点转移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Focus Management</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="input1">
    <input type="text" id="input2">
    <button id="focusButton">Focus on Input2</button>
    <script>
        $(document).ready(function() {
            $('#focusButton').click(function() {
                $('#input2').focus(); // 点击按钮时将焦点移动到 input2
            });
        });
    </script>
</body>
</html>

焦点陷阱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Focus Trap</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="focusTrap">
        <input type="text" id="input1">
        <input type="text" id="input2">
        <button id="exitButton">Exit</button>
    </div>
    <script>
        $(document).ready(function() {
            var focusableElements = $('#focusTrap :focusable');
            var firstFocusable = focusableElements.first()[0];
            var lastFocusable = focusableElements.last()[0];

            $(document).on('keydown', function(e) {
                if (e.keyCode === 9) { // Tab 键
                    if (document.activeElement === lastFocusable && !e.shiftKey) {
                        e.preventDefault();
                        firstFocusable.focus();
                    } else if (document.activeElement === firstFocusable && e.shiftKey) {
                        e.preventDefault();
                        lastFocusable.focus();
                    }
                }
            });

            $('#exitButton').click(function() {
                $('#focusTrap').blur(); // 点击退出按钮时移除焦点陷阱
            });
        });
    </script>
</body>
</html>