Question

我有一组按钮。当他们有焦点时，它们会改变颜色。当用户将鼠标悬停在它们上方或使用向上和向下箭头键时，它们可以获得焦点。

当没有按钮具有焦点时（例如，当用户单击其他位置时），按箭头键会将焦点移到第一个按钮。至少那是要的。

但是，由于我使用相同的键来执行不同的操作，所以每当我按下向下键时，焦点就会移到第一个按钮，然后立即移到第二个按钮。

我似乎找不到想像的方式来完成这项工作。在没有按下按钮的情况下，按下向下箭头键时，我能做些什么来保持焦点在第一个按钮上？

这就是我正在使用的：

var divs = document.getElementsByClassName("blueBtn");
for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener("keyup", function(event) {
        if (event.keyCode == 38) {
            if (this.previousElementSibling) {
                this.previousElementSibling.focus();
            }
        } else if (event.keyCode == 40) {
            if (this.nextElementSibling) {
                this.nextElementSibling.focus();
            }
        }
    }, false);
    divs[i].addEventListener("mouseover", function(event) {
        this.focus();
    }, false);
}

document.body.addEventListener("keydown", function(event) {
    if (document.body === document.activeElement && (event.keyCode === 38 || event.keyCode === 40)) {
        defaultBtn.focus();
    }
});

.blueBtn {
    display: block;
}

.blueBtn:hover,
.blueBtn:focus {
    background-color: blue;
}

<button id="defaultBtn" class="blueBtn" autofocus>Button 01</button>
<button class="blueBtn">Button 02</button>
<button class="blueBtn">Button 03</button>
<button class="blueBtn">Button 04</button>

Answer 1

还有其他更好的方法可以做到这一点，但这是我的建议。我只是使用一个布尔变量来跟踪焦点何时来自身体。

var divs = document.getElementsByClassName("blueBtn");
var fromBody = false;

for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener("keyup", function(event) {
    if (event.keyCode == 38) {
      if (fromBody) {
        fromBody = false;
        return;
      }
      if (this.previousElementSibling) {
        this.previousElementSibling.focus();
      }
    } else if (event.keyCode == 40) {
      if (fromBody) {
        fromBody = false;
        return;
      }
      if (this.nextElementSibling && !fromBody) {
        this.nextElementSibling.focus();
      }
    }
  }, false);
  divs[i].addEventListener("mouseover", function(event) {
    this.focus();
  }, false);
}

document.body.addEventListener("keydown", function(event) {
  if (document.body === document.activeElement && (event.keyCode === 38 || event.keyCode === 40)) {
    fromBody = true;
    defaultBtn.focus();
  }
});

.blueBtn {
  display: block;
}

.blueBtn:hover,
.blueBtn:focus {
  background-color: blue;
}

<button id="defaultBtn" class="blueBtn" autofocus>Button 01</button>
<button class="blueBtn">Button 02</button>
<button class="blueBtn">Button 03</button>
<button class="blueBtn">Button 04</button>

JavaScript-当页面中的任何元素都没有焦点时，将焦点放在keydown上

1 个答案: