js 上下左右键控制焦点(示例代码)

下面是详细讲解js上下左右键控制焦点的攻略。

1. 问题的提出

在制作网页的过程中，有时希望通过键盘方向键来控制不同元素的聚焦，这就需要使用到JavaScript来实现。下面我们将通过示例代码来详细讲解实现方法。

2. 实现步骤

2.1 给需要控制的元素添加tabindex属性

首先，我们需要给需要控制的元素添加 tabindex 属性。这个属性用来指定元素的聚焦顺序，从而达到按顺序聚焦的效果。通常情况下， tabindex 从1开始，但是不同元素的 tabindex 值是可以相同的。

<input type="text" tabindex="1">
<input type="button" tabindex="2">
<input type="checkbox" tabindex="3">

2.2 通过监听键盘事件来实现上下左右键控制焦点

我们可以通过监听键盘事件来实现上下左右键控制焦点的功能。对于上下左右四个方向键，我们需要分别监听 keydown 或 keyup 事件。

document.addEventListener('keydown', function(event) {
    var currentElement = document.activeElement;
    if (event.key === 'ArrowDown') {
        // 下方向键
    } else if (event.key === 'ArrowUp') {
        // 上方向键
    } else if (event.key === 'ArrowLeft') {
        // 左方向键
    } else if (event.key === 'ArrowRight') {
        // 右方向键
    }
});

2.3 获取下一个需要聚焦的元素

当用户按下上下左右键时，我们需要找到下一个需要聚焦的元素。这可以通过遍历 tabindex 属性来实现。

const elements = document.querySelectorAll('[tabindex]');
var currentIndex = Array.from(elements).indexOf(document.activeElement);

if (event.key === 'ArrowDown') {
    // 获取下一个需要聚焦的元素
    var nextIndex = currentIndex;
    do {
        nextIndex = (nextIndex + 1) % elements.length;
    } while (elements[nextIndex].disabled);
} else if (event.key === 'ArrowUp') {
    // 获取上一个需要聚焦的元素
    var nextIndex = currentIndex;
    do {
        if (nextIndex === 0) {
            nextIndex = elements.length;
        }
        nextIndex = (nextIndex - 1) % elements.length;
    } while (elements[nextIndex].disabled);
} else if (event.key === 'ArrowLeft') {
    // 获取左侧需要聚焦的元素
    var nextIndex = Math.max(currentIndex - 1, 0);
} else if (event.key === 'ArrowRight') {
    // 获取右侧需要聚焦的元素
    var nextIndex = Math.min(currentIndex + 1, elements.length - 1);
}

2.4 聚焦到下一个元素

在获取到下一个需要聚焦的元素之后，我们需要聚焦到它。这可以通过 HTMLElement.focus() 方法来实现。

elements[nextIndex].focus();

此时，就可以实现通过上下左右键来控制元素聚焦的功能了。

3. 示例代码说明

下面给出两个使用示例，通过按下方向键控制聚焦到相邻的元素。

示例一

<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">
<input type="text" tabindex="4">
<input type="text" tabindex="5">
<script>
    document.addEventListener('keydown', function(event) {
        const elements = document.querySelectorAll('[tabindex]');
        var currentIndex = Array.from(elements).indexOf(document.activeElement);

        if (event.key === 'ArrowDown') {
            // 获取下一个需要聚焦的元素
            var nextIndex = currentIndex;
            do {
                nextIndex = (nextIndex + 1) % elements.length;
            } while (elements[nextIndex].disabled);
        } else if (event.key === 'ArrowUp') {
            // 获取上一个需要聚焦的元素
            var nextIndex = currentIndex;
            do {
                if (nextIndex === 0) {
                    nextIndex = elements.length;
                }
                nextIndex = (nextIndex - 1) % elements.length;
            } while (elements[nextIndex].disabled);
        } else if (event.key === 'ArrowLeft') {
            // 获取左侧需要聚焦的元素
            var nextIndex = Math.max(currentIndex - 1, 0);
        } else if (event.key === 'ArrowRight') {
            // 获取右侧需要聚焦的元素
            var nextIndex = Math.min(currentIndex + 1, elements.length - 1);
        }

        // 聚焦到下一个元素
        elements[nextIndex].focus();
    });
</script>

示例二

<button tabindex="1">Button 1</button>
<button tabindex="1">Button 2</button>
<button tabindex="1">Button 3</button>
<script>
    document.addEventListener('keydown', function(event) {
        const elements = document.querySelectorAll('[tabindex]');
        var currentIndex = Array.from(elements).indexOf(document.activeElement);

        if (event.key === 'ArrowDown') {
            // 获取下一个需要聚焦的元素
            var nextIndex = currentIndex;
            do {
                nextIndex = (nextIndex + 1) % elements.length;
            } while (elements[nextIndex].disabled);
        } else if (event.key === 'ArrowUp') {
            // 获取上一个需要聚焦的元素
            var nextIndex = currentIndex;
            do {
                if (nextIndex === 0) {
                    nextIndex = elements.length;
                }
                nextIndex = (nextIndex - 1) % elements.length;
            } while (elements[nextIndex].disabled);
        } else if (event.key === 'ArrowLeft') {
            // 获取左侧需要聚焦的元素
            var nextIndex = Math.max(currentIndex - 1, 0);
        } else if (event.key === 'ArrowRight') {
            // 获取右侧需要聚焦的元素
            var nextIndex = Math.min(currentIndex + 1, elements.length - 1);
        }

        // 聚焦到下一个元素
        elements[nextIndex].focus();
    });
</script>

4. 总结

通过以上方法实现的上下左右键控制焦点功能能够方便用户在网页中通过键盘快速聚焦到不同的元素，提高了用户交互的体验。但是需要注意的是，在设置 tabindex 属性时需要注意不能设置相同的值，否则可能会出现无法预期的问题。