时间戳

首页 > 解决方案 > 有没有办法从 querySelectorAll() 中聚焦元素？

javascript - 有没有办法从 querySelectorAll() 中聚焦元素？

问题描述

我想从键盘（向上和向下键）集中我的下拉元素。

我的代码：

var matches = document.querySelectorAll("div.dropdown-content > a");
var i = 0;
var focused = matches[i];

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            i++;
            focused.focus();
            break;
        case 38:
            i--;
            focused.focus();
            break;
    }
};

但它实际上不起作用。控制台不报告任何错误。

标签： javascript

解决方案

你一直关注同一个元素，变化focused时不会更新i。

此外，向下箭头的键码是40，而不是37。

最后，您应该检查i始终在0和之间matches.length - 1。

var matches = document.querySelectorAll("div.dropdown-content > a");
var i = 0;

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 40:
            if(i < matches.length - 1) i++;
            matches[i].focus();
            break;
        case 38:
            if(i > 0) i--;
            matches[i].focus();
            break;
    }
};

当您到达最后一项时，您还可以关注第一项，反之亦然：

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 40:
            i = (i + 1) % matches.length;
            matches[i].focus();
            break;
        case 38:
            i = Math.abs(i - 1 + matches.length) % matches.length;
            matches[i].focus();
            break;
    }
};

推荐阅读