标签：20 1.0 焦点 li 键盘 测试 keyNum margin
<!-- 代码思路：所有内容放在<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 来源： https://www.cnblogs.com/mxlong/p/16641037.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。