js实现tab跳转

实现Tab跳转的基本思路

使用JavaScript监听键盘事件，当按下Tab键时，将焦点切换到下一个可聚焦元素。常见的可聚焦元素包括<input>、<select>、<textarea>和带有tabindex属性的元素。

document.addEventListener('keydown', function(event) {
    if (event.key === 'Tab') {
        event.preventDefault();
        const focusableElements = document.querySelectorAll('input, select, textarea, button, [tabindex]:not([tabindex="-1"])');
        const currentElement = document.activeElement;
        let currentIndex = Array.from(focusableElements).indexOf(currentElement);

        if (currentIndex === -1) {
            focusableElements[0].focus();
        } else {
            const nextIndex = (currentIndex + 1) % focusableElements.length;
            focusableElements[nextIndex].focus();
        }
    }
});

自定义Tab顺序

通过tabindex属性可以自定义元素的Tab顺序。tabindex="0"表示元素可聚焦且按自然顺序排列，tabindex="-1"表示元素不可通过Tab键聚焦。

<input type="text" tabindex="1">
<button tabindex="3">Button</button>
<select tabindex="2">
    <option>Option 1</option>
</select>

处理动态内容

对于动态添加的元素，需要重新获取可聚焦元素列表。可以使用MutationObserver监听DOM变化。

const observer = new MutationObserver(function() {
    focusableElements = document.querySelectorAll('input, select, textarea, button, [tabindex]:not([tabindex="-1"])');
});
observer.observe(document.body, { childList: true, subtree: true });

循环跳转

默认情况下，Tab键会在页面末尾停止。通过以下代码可以实现循环跳转：

const focusableElements = document.querySelectorAll('input, select, textarea, button, [tabindex]:not([tabindex="-1"])');
focusableElements[0].focus();

document.addEventListener('keydown', function(event) {
    if (event.key === 'Tab') {
        event.preventDefault();
        const currentElement = document.activeElement;
        let currentIndex = Array.from(focusableElements).indexOf(currentElement);
        const nextIndex = (currentIndex + 1) % focusableElements.length;
        focusableElements[nextIndex].focus();
    }
});

反向Tab跳转（Shift+Tab）

通过检查event.shiftKey可以实现反向跳转。

document.addEventListener('keydown', function(event) {
    if (event.key === 'Tab') {
        event.preventDefault();
        const focusableElements = document.querySelectorAll('input, select, textarea, button, [tabindex]:not([tabindex="-1"])');
        const currentElement = document.activeElement;
        let currentIndex = Array.from(focusableElements).indexOf(currentElement);

        if (event.shiftKey) {
            const prevIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length;
            focusableElements[prevIndex].focus();
        } else {
            const nextIndex = (currentIndex + 1) % focusableElements.length;
            focusableElements[nextIndex].focus();
        }
    }
});

兼容性处理

确保代码在旧版浏览器中正常工作，可以使用event.keyCode或event.which作为备用方案。

document.addEventListener('keydown', function(event) {
    const key = event.key || event.keyCode;
    if (key === 'Tab' || key === 9) {
        event.preventDefault();
        // 跳转逻辑
    }
});

禁用特定元素的Tab跳转

通过设置tabindex="-1"或动态移除tabindex属性可以禁用某些元素的Tab跳转。

document.getElementById('no-tab').setAttribute('tabindex', '-1');