在HTML中通过方向键控制“焦点”

想在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>

参考
Trap focus using javaScript