键盘按键测试

参考：https://www.keyboardtest.cn/
三种布局

全键盘
隐藏数字区域
隐藏方向区域和数字区域
html 复制代码
<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>