html enter键切换焦点,在HTML中通过方向键控制“焦点”

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

建立一个简单的页面

Document

div {

width: 200px;

height: 200px;

float: left;

margin-left: 20px;

margin-top: 20px;

text-align: center;

}

div1

div2

div3

包含了3个div

image.png

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

div1

div2

div3

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

image.png

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

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

div1

div2

div3

window.onload = function () {