在HTML中通过方向键控制“焦点”
2020-08-08 本文已影响0人
祥龙翔天
想在TV焦点移动一样，用遥控器控制方向键控制焦点的移动
建立一个简单的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="idv1" style="background-color: antiquewhite;">div1</div>
<div id="idv2" style="background-color: aqua;">div2</div>
<div id="idv3" style="background-color: coral;">div3</div>
</body>
</html>
包含了3个div
image.png
此刻点击任何div都没有效果，但是如果加上tableindex属性
<body>
<div id="idv1" tabindex="1" style="background-color: antiquewhite;">div1</div>
<div id="idv2" tabindex="1" style="background-color: aqua;">div2</div>
<div id="idv3" tabindex="1" style="background-color: coral;">div3</div>
</body>
后，点击中间的div后，会有上焦的效果
image.png
接下来我们实现通过控制方向键来控制焦点的移动
首先实现让第一个div在页面加载后上焦
<body>
<div id="idv1" tabindex="1" style="background-color: antiquewhite;">div1</div>
<div id="idv2" tabindex="1" style="background-color: aqua;">div2</div>
<div id="idv3" tabindex="1" style="background-color: coral;">div3</div>
<script type="text/javascript">
window.onload = function () {
var elements = document.getElementsByTagName("div");
elements[0].focus();
}
</script>
</body>
接着监听方向键
var elementsArray = [...elements];
var currFocusIndex = -1;
document.addEventListener('keyup', function handleKey(e) {
var focusIndex = elementsArray.indexOf(document.activeElement);
if (e.keyCode === 39 || e.keyCode === 40) {
currFocusIndex = ++focusIndex;
} else if (e.keyCode === 37 || e.keyCode === 38) {
currFocusIndex = --focusIndex;
}
if (currFocusIndex > elementsArray.length - 1) {
currFocusIndex = elementsArray.length - 1;
}
if (currFocusIndex < 0) {
currFocusIndex = 0;
}
elementsArray[currFocusIndex].focus();
})
完整的效果
test_focus_move.gif
整个html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="idv1" tabindex="1" style="background-color: antiquewhite;">div1</div>
<div id="idv2" tabindex="1" style="background-color: aqua;">div2</div>
<div id="idv3" tabindex="1" style="background-color: coral;">div3</div>
<script type="text/javascript">
window.onload = function () {
var elements = document.getElementsByTagName("div");
elements[0].focus();
var elementsArray = [...elements];
var currFocusIndex = -1;
document.addEventListener('keyup', function handleKey(e) {
var focusIndex = elementsArray.indexOf(document.activeElement);
if (e.keyCode === 39 || e.keyCode === 40) {
currFocusIndex = ++focusIndex;
} else if (e.keyCode === 37 || e.keyCode === 38) {
currFocusIndex = --focusIndex;
}
if (currFocusIndex > elementsArray.length - 1) {
currFocusIndex = elementsArray.length - 1;
}
if (currFocusIndex < 0) {
currFocusIndex = 0;
}
elementsArray[currFocusIndex].focus();
})
}
</script>
</body>
</html>
