Javascript - 当页面中没有元素获得焦点时,keydown 上的焦点元素
Javascript - Focus element on keydown, when no element in the page has focus
我有一组按钮。当他们有焦点时,他们会改变颜色。
当用户将鼠标悬停在它们上面或当用户使用向上和向下箭头键时,它们可以获得焦点。
当没有按钮获得焦点时(例如,当用户单击其他地方时),按箭头键会将焦点转移到第一个按钮。至少,这就是我们的意图。
但是,由于我使用相同的键执行不同的操作,所以每当我按下向下键时,焦点都会转到第一个按钮,然后立即转到第二个按钮。
我似乎找不到让这项工作如我所愿的方法。当按下向下箭头键时,当没有按钮具有焦点时,我可以做些什么来将焦点保持在第一个按钮上?
这就是我正在使用的:
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>
必须有其他更好的方法来做到这一点,但这是我的建议。我只是使用了一个布尔变量来跟踪焦点何时来自 body.
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>
我有一组按钮。当他们有焦点时,他们会改变颜色。 当用户将鼠标悬停在它们上面或当用户使用向上和向下箭头键时,它们可以获得焦点。
当没有按钮获得焦点时(例如,当用户单击其他地方时),按箭头键会将焦点转移到第一个按钮。至少,这就是我们的意图。
但是,由于我使用相同的键执行不同的操作,所以每当我按下向下键时,焦点都会转到第一个按钮,然后立即转到第二个按钮。
我似乎找不到让这项工作如我所愿的方法。当按下向下箭头键时,当没有按钮具有焦点时,我可以做些什么来将焦点保持在第一个按钮上?
这就是我正在使用的:
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>
必须有其他更好的方法来做到这一点,但这是我的建议。我只是使用了一个布尔变量来跟踪焦点何时来自 body.
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>