参考：https://www.keyboardtest.cn/
三种布局
全键盘
隐藏数字区域
隐藏方向区域和数字区域
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>键盘测试</title> </head> <style> body { background:#111; } h1,h2 { text-align:center; color:#eee; } p { color:#eee; } a { text-decoration:none; color:#eee; } button { width:50px; height:50px; margin:5px; background:#333; color:#eee; border-radius:10px; box-shadow:0 5px #444; } table { } tr { white-space: nowrap; } td { vertical-align:top; padding:0; } .keydown { background:#ffffff; color:#000000; } .keyup { background:#004400; color:#00aa00; } #info { color:#fff; padding-left:50px; } #keyboard { border:1px solid gray; border-radius:20px; padding:30px; margin:auto; } #k112 { margin-left:50px; } #k116 { margin-left:40px; } #k120 { margin-left:40px; } #k8 { width:110px; } #k9 { width:76px; } #k220 { width:76px; } #k107, #k13a { height:110px; } #k20 { width:90px; } #k13, #k16 { width:127px; } #k16a { width:155px; } #k17, #kwin, #k18, #k18a, #kfn, #k93, #k17a { width:65px; } #k32 { width:385px; } #k96 { width:112px; } #padmove { padding:0 0 0 30px; } #padnum { padding:60px 0 0 30px; } #arrow { margin-top:60px; } </style> <body> <h1>键盘测试</h1> <p><input type="checkbox" id="check_padmove" checked>PadMove <input type="checkbox" id="check_padnum" checked>PadNum <span id="info">key keyCode location down/up </span></p> <table id="keyboard"> <tr> <td> <button id="k27">Esc</button> <button id="k112">F1</button> <button id="k113">F2</button> <button id="k114">F3</button> <button id="k115">F4</button> <button id="k116">F5</button> <button id="k117">F6</button> <button id="k118">F7</button> <button id="k119">F8</button> <button id="k120">F9</button> <button id="k121">F10</button> <button id="k122">F11</button> <button id="k123">F12</button> <br> <button id="k192">`</button><button id="k49">1</button><button id="k50">2</button> <button id="k51">3</button> <button id="k52">4</button> <button id="k53">5</button> <button id="k54">6</button> <button id="k55">7</button> <button id="k56">8</button> <button id="k57">9</button> <button id="k48">0</button> <button id="k189">-</button> <button id="k187">=</button> <button id="k8">BackSpace</button> <br> <button id="k9">Tab</button> <button id="k81">Q</button> <button id="k87">W</button> <button id="k69">E</button> <button id="k82">R</button> <button id="k84">T</button> <button id="k89">Y</button> <button id="k85">U</button> <button id="k73">I</button> <button id="k79">O</button> <button id="k80">P</button> <button id="k219">[</button> <button id="k221">]</button> <button id="k220">\</button> <br> <button id="k20">CapsLk</button> <button id="k65">A</button> <button id="k83">S</button> <button id="k68">D</button> <button id="k70">F</button> <button id="k71">G</button> <button id="k72">H</button> <button id="k74">J</button> <button id="k75">K</button> <button id="k76">L</button> <button id="k186">;</button> <button id="k222">'</button> <button id="k13">Enter</button> <br> <button id="k16">Shift</button> <button id="k90">Z</button> <button id="k88">X</button> <button id="k67">C</button> <button id="k86">V</button> <button id="k66">B</button> <button id="k78">N</button> <button id="k77">M</button> <button id="k188">,</button> <button id="k190">.</button> <button id="k191">/</button> <button id="k16a">Shift</button> <br> <button id="k17">Ctrl</button> <button id="kwin">Win</button> <button id="k18">Alt</button> <button id="k32">Space</button> <button id="k18a">Alt</button> <button id="kfn">Fn</button> <button id="k93">Menu</button> <button id="k17a">Ctrl</button> </td> <td id="padmove"> <button id="PrintScreen">PrtSc</button> <button id="k145">ScrLk</button> <button id="k19">Pause</button><br> <button id="k45">Insert</button> <button id="k36">Home</button> <button id="k33">PgUp</button><br> <button id="k46">Del</button> <button id="k35">End</button> <button id="k34">PgDn</button> <table id="arrow"> <tr><td></td><td><button id="k38">↑</button></td><td></td></tr> <tr><td><button id="k37">←</button></td><td><button id="k40">↓</button></td><td><button id="k39">→</button></td></tr> </table> </td> <td id="padnum"> <table> <tr><td><button id="k144">Num</button></td><td><button id="k111">/</button></td><td><button id="k106">*</button></td><td><button id="k109">-</button></td></tr> <tr><td><button id="k103">7</button></td><td><button id="k104">8</button></td><td><button id="k105">9</button></td><td rowspan="2"><button id="k107">+</button></td></tr> <tr><td><button id="k100">4</button></td><td><button id="k101">5</button></td><td><button id="k102">6</button></td></tr> <tr><td><button id="k97">1</button></td><td><button id="k98">2</button></td><td><button id="k99">3</button></td><td rowspan="2"><button id="k13a">Ent</button></td></tr> <tr><td colspan="2"><button id="k96">0</button></td><td><button id="k110">.</button></td></tr> </table> </td> </tr> </table> </div> <br> <a href="https://www.keyboardtest.cn/" target="_blank">keyboardtest</a> <script> document.onkeydown = function(e){ info.innerText = e.key + ' ' + e.keyCode + ' ' + e.location + ' down'; if (e.location == 2) eval('k' + e.keyCode + 'a').className = 'keydown'; else if (e.key == 'Enter' && e.location == 3) eval('k' + e.keyCode + 'a').className = 'keydown'; else eval('k' + e.keyCode).className = 'keydown'; //禁止浏览器快捷键 e.preventDefault(); e.stopPropagation(); return false; } document.onkeyup = function(e){ info.innerText = e.key + ' ' + e.keyCode + ' ' + e.location + ' up'; if (e.location == 2) eval('k' + e.keyCode + 'a').className = 'keyup'; else if (e.key == 'Enter' && e.location == 3) eval('k' + e.keyCode + 'a').className = 'keyup'; else eval('k' + e.keyCode).className = 'keyup'; } check_padmove.onclick = function(){ if (check_padmove.checked == true) padmove.style.display = 'block'; else padmove.style.display = 'none'; } check_padnum.onclick = function(){ if (check_padnum.checked == true) padnum.style.display = 'block'; else padnum.style.display = 'none'; } </script> </body> </html>
