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

想在TV焦点移动一样，用遥控器控制方向键控制焦点的移动

建立一个简单的页面

    
    
    
    



    
div1
    
div2
    
div3

包含了3个div

image.png

此刻点击任何div都没有效果，但是如果加上tableindex属性

    
div1
    
div2
    
div3

后，点击中间的div后，会有上焦的效果

image.png

接下来我们实现通过控制方向键来控制焦点的移动

首先实现让第一个div在页面加载后上焦

    
div1
    
div2
    
div3

    

接着监听方向键

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如下

    
    
    
    



    
div1
    
div2
    
div3

    

参考
Trap focus using javaScript