- A+
所属分类：Web前端
<!--
之前写了个1.0版本，按键布局不美观，这又在原来的基础上修改了下，写了个2.0版本。
代码思路：这次代码没有用keycode码放在数组中，而是用key属性，获取所按下的键的名称，再通过a标签的innerHTML属性，查找所有内容，如果内容相同，就将所对应的标签背景颜色设置为红色，用key这种方法来完成，优点是JS代码量少，但是不足之处是a标签的内容必须是和key显示的键名完全一样，否则会认为不是按下的键，所以项目中功能键的名称都按key定义的名称来设置的，用keycode就不会有这种情况，而且如果做104键盘（键盘有小键盘区的），用key就不能解决这种种情，必须用keycode来进行判断按下的键是否是小键盘区的，熟优熟劣根据自己喜好来选择吧。代码较烂，见谅，主要是和大家分享，让我们因代码而改变、成长并获得成功！
-->
效果图：
CSS代码：
1 *{ 2 margin: 0; 3 border: 0; 4 } 5 6 h1,p{ 7 text-align: center; 8 } 9 10 div{ 11 margin: 40px auto; 12 width: 1000px; 13 height: 490px; 14 } 15 16 a{ 17 display: block; 18 height: 50px; 19 width: 50px; 20 border: 1px solid red; 21 float: left; 22 position: relative; 23 margin-left: 10px; 24 margin-top: 10px; 25 text-align: center; 26 27 } 28 29 #esc{ 30 font-size: small; 31 } 32 33 #pause{ 34 margin-top: 10px; 35 margin-left: 10px; 36 float: left; 37 border: 1px solid red; 38 text-align: center; 39 font-size: small; 40 } 41 42 #tab{ 43 margin-top: 10px; 44 margin-left: 10px; 45 float: left; 46 height: 50px; 47 width: 70px; 48 border: 1px solid red; 49 text-align: center; 50 } 51 52 #cap{ 53 margin-top: 10px; 54 margin-left: 10px; 55 float: left; 56 height: 50px; 57 width: 85px; 58 border: 1px solid red; 59 text-align: center; 60 } 61 62 #enter{ 63 margin-top: 10px; 64 margin-left: 10px; 65 float: left; 66 height: 50px; 67 width: 85px; 68 border: 1px solid red; 69 text-align: center; 70 } 71 72 #shift{ 73 margin-top: 10px; 74 margin-left: 10px; 75 float: left; 76 height: 50px; 77 width: 100px; 78 border: 1px solid red; 79 text-align: center; 80 } 81 82 #space{ 83 margin-top: 10px; 84 margin-left: 10px; 85 float: left; 86 height: 50px; 87 width: 370px; 88 border: 1px solid red; 89 text-align: center; 90 } 91 92 #insert{ 93 margin-top: 10px; 94 margin-left: 10px; 95 float: left; 96 border: 1px solid red; 97 text-align: center; 98 font-size: small; 99 } 100 101 #delete{ 102 margin-top: 10px; 103 margin-left: 10px; 104 float: left; 105 border: 1px solid red; 106 text-align: center; 107 font-size: small; 108 } 109 110 #backspace{ 111 margin-top: 10px; 112 margin-left: 10px; 113 float: left; 114 height: 50px; 115 width: 100px; 116 border: 1px solid red; 117 text-align: center; 118 font-size: small; 119 } 120 121 #ctrl{ 122 margin-top: 10px; 123 margin-left: 10px; 124 float: left; 125 height: 50px; 126 width: 60px; 127 border: 1px solid red; 128 text-align: center; 129 font-size: xx-small; 130 } 131 132 #meta{ 133 margin-top: 10px; 134 margin-left: 10px; 135 float: left; 136 border: 1px solid red; 137 text-align: center; 138 font-size: small; 139 } 140 141 #up{ 142 margin-top: 10px; 143 margin-left: 10px; 144 float: left; 145 border: 1px solid red; 146 text-align: center; 147 font-size: small; 148 word-break: break-all; 149 } 150 151 #left{ 152 margin-top: 10px; 153 margin-left: 10px; 154 float: left; 155 border: 1px solid red; 156 text-align: center; 157 font-size: small; 158 word-break: break-all; 159 } 160 161 #down{ 162 margin-top: 10px; 163 margin-left: 10px; 164 float: left; 165 border: 1px solid red; 166 text-align: center; 167 font-size: small; 168 word-break: break-all; 169 } 170 171 #right{ 172 margin-top: 10px; 173 margin-left: 10px; 174 float: left; 175 border: 1px solid red; 176 text-align: center; 177 font-size: small; 178 word-break: break-all; 179 } 180 181 .empty{ 182 float: left; 183 border: 1px solid white; 184 }
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>键盘按键测试2.0版</title> 8 </head> 9 <body> 10 11 <h1>键盘按键测试</h1> 12 <p>注：测试前请先按F11，先让浏览器处于全屏状态下，否则当按下TAB键时，会让当前页面失去焦点，影响后面使用。</p> 13 <p>如果在非全屏下，失去焦点时，在任意红框内点下鼠标即可重新获得焦点。</p> 14 <div id="all"> 15 <!--div使用键盘监听事件时，要设置tabindex=1才可以被监听 16 --> 17 <div id="key" tabindex="1"> 18 <a id="esc">ESCAPE</a><a>F1</a><a>F2</a><a>F3</a><a>F4</a><a>F5</a><a>F6</a><a>F7</a><a>F8</a><a>F9</a><a>F10</a><a>F11</a><a>F12</a><a id="pause">PAUSE</a><a id="insert">INSERT</a><a id="delete">DELETE</a> 19 <a>`</a><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>0</a><a>-</a><a>=</a><a id="backspace">BACKSPACE</a><a class="empty"></a> 20 <a id="tab">TAB</a><a>Q</a><a>W</a><a>E</a><a>R</a><a>T</a><a>Y</a><a>U</a><a>I</a><a>O</a><a>P</a><a>[</a><a>]</a><a class="empty"></a><a class="empty"></a> 21 <a id="cap">CAPSLOCK</a><a>A</a><a>S</a><a>D</a><a>F</a><a>G</a><a>H</a><a>J</a><a>K</a><a>L</a><a>;</a><a>'</a><a></a><a id="enter">ENTER</a> 22 <a id="shift">SHIFT</a><a>Z</a><a>X</a><a>C</a><a>V</a><a>B</a><a>N</a><a>M</a><a>,</a><a>.</a><a>/</a><a id="shift">SHIFT</a><a id="up">ARROWUP</a><a class="empty"></a> 23 <a id="ctrl">CONTROL</a><a id="meta">META</a><a>ALT</a><a id="space"> </a><a>META</a><a>ALT</a><a id="ctrl">CONTROL</a><a id="left">ARROWLEFT</a><a id="down">ARROWDOWN</a><a id="right">ARROWRIGHT</a> 24 </div> 25 </div> 26 </body> 27 </html>
JavaScript代码：
1 /* 2 名称：键盘测试2.0版 3 功能:测试键盘上按键被按下，同时页面上显示的对应键产生变化 4 日期：2022年8月30日22:07 5 作者：猫降龙 6 */ 7 8 //获取ID 9 let tagKey=document.getElementById("key"); 10 //获取a元素 11 //let tagA=tagKey.getElementsByTagName("a"); 12 tagKey.focus(); 13 //event是对像类型，写成e也是同样效果 14 tagKey.onkeydown=function(event){ 15 //注：打印event会发现里面有一个key属性 16 //打印event.key是监控键盘按下的是什么键 17 //console.log(event.key); 18 19 //key是event对像中的属性 20 //let {key}=event; 21 //console.log(key); 22 //将按下的键名(event中的key属性)赋值给strKey 23 let strKey=event.key; 24 //console.log("你已按下该键"+strKey); 25 //console.log(strKey.toUpperCase()); 26 //获取所有a标签，不包含内容 27 let tagKey=document.querySelectorAll("a"); 28 //获取的所有a标签，用forEach来循环其中的内容 29 tagKey.forEach(a=>{ 30 31 //如果按下的英文键名转为大写等于a标签的内容，则将其改为红色背景 32 if(a.innerHTML===strKey.toUpperCase()){ 33 //a.setAttribute("style","background-color:red"); 34 a.style.backgroundColor="red"; 35 //a.style.color="red"; 36 } 37 }); 38 } 39 40 //每隔500毫秒获取一次焦点 41 setInterval(() => { 42 tagKey.focus(); 43 }, 500);
