js怎么让tab键只在表单中切换

要让JavaScript实现Tab键只在表单中切换，可以使用事件监听器在表单元素上监控Tab键的按下事件，并根据需要控制焦点的移动。具体方法如下：

通过事件监听器监控键盘事件：在表单元素上添加一个键盘事件监听器，确保只在按下Tab键时处理事件。
获取表单中的所有可聚焦元素：使用选择器获取表单中的所有可聚焦元素，例如输入框、按钮等。
控制焦点移动：在按下Tab键时，根据当前焦点的位置，手动设置下一个焦点。

以下是一个基本的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Navigation in Form</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="input1" id="input1" placeholder="Input 1">
        <input type="text" name="input2" id="input2" placeholder="Input 2">
        <input type="text" name="input3" id="input3" placeholder="Input 3">
        <button type="button">Button</button>
    </form>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const form = document.getElementById('myForm');
            const focusableElements = form.querySelectorAll('input, button');
            const focusableArray = Array.prototype.slice.call(focusableElements);
            form.addEventListener('keydown', (event) => {
                if (event.key === 'Tab') {
                    event.preventDefault();
                    const currentIndex = focusableArray.indexOf(document.activeElement);
                    let nextIndex;
                    if (event.shiftKey) {
                        nextIndex = currentIndex - 1;
                        if (nextIndex < 0) {
                            nextIndex = focusableArray.length - 1;
                        }
                    } else {
                        nextIndex = currentIndex + 1;
                        if (nextIndex >= focusableArray.length) {
                            nextIndex = 0;
                        }
                    }
                    focusableArray[nextIndex].focus();
                }
            });
        });
    </script>
</body>
</html>

详细说明：

通过事件监听器监控键盘事件：在文档加载完成后，给表单元素添加keydown事件监听器，确保只在按下Tab键时处理事件。
获取表单中的所有可聚焦元素：使用选择器querySelectorAll获取表单中的所有可聚焦元素，例如输入框、按钮等，并将其转换为数组。
控制焦点移动：在按下Tab键时，首先阻止默认行为，然后根据当前焦点的位置，手动设置下一个焦点。如果按下Shift+Tab键，则逆向移动焦点。

这种方法可以确保Tab键只在表单中的元素之间切换，而不会跳出表单。

js怎么让tab键只在表单中切换

相关问答FAQs：