<!--
代码思路：所有内容放在<ul><li>中，这样方便统一取到焦点，先注册监听键盘事件，用的是onkeydown,当某个键被按下后，
产生一个keyCode键码值，在键码值数组中（此数组的键码排序和ul/li中的内容排序完全一样）用一个循环查找此
值的位置，然后根据索引号更改li元素的行内属性（设置背景颜色为红色），从而标记此键已被按下。为防止焦点丢
失，设置一个计时器，每500毫秒获取一次焦点，这样就能保证焦点始终在这个块上，为防止按到“TAB”键后强行改变
焦点位置，建议将浏览器设置为全屏模式（按F11），即可完美解决焦点因“TAB”键丢失问题。之前也想过布局分几块
来实现，从美观的角度来讲，更贴合键盘的结构，但是分几块同时取到焦点是一个难点，后面想到更好的方法时，再去
实现了。PageUp/PageDown/End/Home键没有添加，因为我用的是笔记本，没有外接键盘，所以添加了码值，也没法测
试，感兴趣的小伙伴自己完善下吧。代码较烂，见谅，主要是和大家分享，让我们因代码而改变、成长并获得成功！
-->
效果图：
css代码：
1 *{
2 margin: 0;
3 border: 0;
4 }
5
6 h1{
7 text-align: center;
8 }
9 p{
10 text-align: center;
11 color: red;
12 }
13 #keyNum{
14 margin-top: 20px;
15 margin-left: -10px;
16 }
17
18 #keyEng{
19 margin-top: 40px;
20 }
21
22 #keyNum li{
23 display: block;
24 height: 40px;
25 width: 40px;
26 border: 1px solid red;
27 float: left;
28 text-align: center;
29 position: relative;
30 padding: 10px;
31 margin-left: 25px;
32 margin-top: 25px;
33 }
HTML代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>键盘按键测试1.0版</title> 8 </head> 9 10 <body> 11 <h1>键盘按键测试</h1> 12 <p>注：测试前请先按F11，先让浏览器处于全屏状态下，否则当按下TAB键时，会让当前页面失去焦点，影响后面使用。</p> 13 <p>如果在非全屏下，失去焦点时，在任意红框内点下鼠标即可重新获得焦点。</p> 14 <div> 15 <!--div使用键盘监听事件时，要设置tabindex=1才可以被监听 16 --> 17 <div id="keyNum" tabindex="1"> 18 <ul > 19 <li>ESC</li><li>F1</li><li>F2</li><li>F3</li><li>F4</li><li>F5</li><li>F6</li><li>F7</li><li>F8</li><li>F9</li><li>F10</li><li>F11</li><li>F12</li><li>DEL</li> 20 <li>`</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li><li>-</li><li>=</li><li>退格</li> 21 <li>TAB</li><li>Q</li><li>W</li><li>E</li><li>R</li><li>T</li><li>Y</li><li>U</li><li>I</li><li>O</li><li>P</li><li>[</li><li>]</li><li></li> 22 <li>CAPS</li><li>A</li><li>S</li><li>D</li><li>F</li><li>G</li><li>H</li><li>J</li><li>K</li><li>L</li><li>;</li><li>'</li><li>\</li><li>ENTER</li> 23 <li>SHIFT</li><li>Z</li><li>X</li><li>C</li><li>V</li><li>B</li><li>N</li><li>M</li><li>,</li><li>.</li><li>/</li><li></li><li>PAUSE</li><li>INS</li> 24 <li>CRL</li><li>WIN</li><li>ALT</li><li>SPACE</li><li></li><li></li><li></li><li></li><li></li><li></li><li>上键</li><li>下键</li><li>左键</li><li>右键</li> 25 </ul> 26 </div> 27 </div> 28 </body> 29 </html>
JavaScript代码：
1 /*
2 名称：键盘测试1.0版
3 功能:测试键盘上按键被按下，同时页面上显示的对应键产生变化
4 日期：2022年8月22日13:20-2022年8月23日15:52
5 作者：猫降龙
6 */
7 //keycode码是按上面li元素的顺序相对应
8 arrykeyNum=[27,112,113,114,115,116,117,118,119,120,121,122,123,46,//对应上面li第一行
9 192,49,50,51,52,53,54,55,56,57,48,189,187,8,//对应上面li第二行，下面以此类推
10 9,81,87,69,82,84,89,85,73,79,80,219,221,0,
11 20,65,83,68,70,71,72,74,75,76,186,222,220,13,
12 16,90,88,67,86,66,78,77,188,190,191,0,19,45,
13 17,91,18,32,0,0,0,0,0,0,38,40,37,39];
14 //获取ID
15 let keyNum=document.getElementById("keyNum");
16 //获取li元素
17 let key1=keyNum.getElementsByTagName("li");
18 keyNum.focus();
19
20 keyNum.onkeydown=function(event){
21 for(let i=0;i<arrykeyNum.length;i++){
22 if(arrykeyNum[i]===event.keyCode){
23 let keyNum=document.getElementById("keyNum");
24 let key1=keyNum.getElementsByTagName("li")[i];
25 key1.setAttribute("style","background-color:red");
26 }
27 }
28 }
29 //每隔500毫秒获取一次焦点
30 setInterval(() => {
31 keyNum.focus();
32 }, 500);
标签：20,1.0,焦点,li,键盘,测试,keyNum,margin From： https://www.cnblogs.com/mxlong/p/16641037.html