js 上下左右键控制焦点(示例代码)-前端开发

下面是详细讲解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>