You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
171 lines
3.6 KiB
171 lines
3.6 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Keyboard Tester</title>
|
|
<style>
|
|
kbd {
|
|
min-width: 1rem;
|
|
border: 1px solid red;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
kbd.works {
|
|
border-color: lime;
|
|
}
|
|
|
|
kbd.down {
|
|
border-color: blue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<select onchange="loadLayout()" id="layout-selector">
|
|
<option selected disabled>Select a keyboard</option>
|
|
<option value="macSmall">MacBook (US)</option>
|
|
</select>
|
|
|
|
<div id="keyboard"></div>
|
|
|
|
<script async>
|
|
const codes = {
|
|
esc: "Escape",
|
|
F1: "F1",
|
|
F2: "F2",
|
|
F3: "F3",
|
|
F4: "F4",
|
|
F5: "F5",
|
|
F6: "F6",
|
|
F7: "F7",
|
|
F8: "F8",
|
|
F9: "F9",
|
|
F10: "F10",
|
|
F11: "F11",
|
|
F12: "F12",
|
|
F13: "F13",
|
|
F14: "F14",
|
|
F15: "F15",
|
|
F16: "F16",
|
|
Q: "KeyQ",
|
|
W: "KeyW",
|
|
E: "KeyE",
|
|
R: "KeyR",
|
|
T: "KeyT",
|
|
Y: "KeyY",
|
|
U: "KeyU",
|
|
I: "KeyI",
|
|
O: "KeyO",
|
|
P: "KeyP",
|
|
A: "KeyA",
|
|
S: "KeyS",
|
|
D: "KeyD",
|
|
F: "KeyF",
|
|
G: "KeyG",
|
|
H: "KeyH",
|
|
J: "KeyJ",
|
|
K: "KeyK",
|
|
L: "KeyL",
|
|
Z: "KeyZ",
|
|
X: "KeyX",
|
|
C: "KeyC",
|
|
V: "KeyV",
|
|
B: "KeyB",
|
|
N: "KeyN",
|
|
M: "KeyM",
|
|
"1": "Digit1",
|
|
"2": "Digit2",
|
|
"3": "Digit3",
|
|
"4": "Digit4",
|
|
"5": "Digit5",
|
|
"6": "Digit6",
|
|
"7": "Digit7",
|
|
"8": "Digit8",
|
|
"9": "Digit9",
|
|
"0": "Digit0",
|
|
"`": "Backquote",
|
|
"[": "BracketLeft",
|
|
"]": "BracketRight",
|
|
"-": "Minus",
|
|
"=": "Equal",
|
|
"\\": "Backslash",
|
|
";": "Semicolon",
|
|
"'": "Quote",
|
|
",": "Comma",
|
|
".": "Period",
|
|
"/": "Slash",
|
|
"space": "Space",
|
|
delete: "Backspace",
|
|
tab: "Tab",
|
|
"caps lock": "CapsLock",
|
|
"return": "Enter",
|
|
"shift (L)": "ShiftLeft",
|
|
"shift (R)": "ShiftRight",
|
|
"control (L)": "ControlLeft",
|
|
"control (R)": "ControlRight",
|
|
"option (L)": "AltLeft",
|
|
"option (R)": "AltRight",
|
|
"command (L)": "MetaLeft",
|
|
"command (R)": "MetaRight",
|
|
"up": "ArrowUp",
|
|
"down": "ArrowDown",
|
|
"left": "ArrowLeft",
|
|
"right": "ArrowRight",
|
|
};
|
|
|
|
const layouts = {
|
|
macSmall: [
|
|
["esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"],
|
|
["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "delete"],
|
|
["tab", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "[", "]", "\\"],
|
|
["caps lock", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", "'", "return"],
|
|
["shift (L)", "Z", "X", "C", "V", 'B', "N", "M", ",", ".", "/", "shift (R)"],
|
|
["control (L)", "option (L)", "command (L)", "space", "command (R)", "option (R)", "left", "up", "down", "right"]
|
|
]
|
|
};
|
|
|
|
var click = new Audio("assets/audio/click.mp3");
|
|
click.loop = false;
|
|
|
|
function loadLayout() {
|
|
var layout = document.getElementById("layout-selector").value;
|
|
var keyboard = document.getElementById("keyboard");
|
|
|
|
for(var i = 0; i < layouts[layout].length; i++) {
|
|
let kbdRow = document.createElement("div");
|
|
keyboard.appendChild(kbdRow);
|
|
var keyRow = layouts[layout][i];
|
|
for(var j = 0; j < keyRow.length; j++) {
|
|
let kbd = document.createElement("kbd");
|
|
kbdRow.appendChild(kbd);
|
|
kbd.textContent = keyRow[j];
|
|
kbd.id = codes[keyRow[j]];
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
addEventListener("keydown", function(event) {
|
|
event.preventDefault();
|
|
var key = document.getElementById(event.code);
|
|
if(key) {
|
|
key.classList.add("down");
|
|
} else {
|
|
console.warn("Missing key", event.code);
|
|
}
|
|
|
|
click.load();
|
|
click.play();
|
|
});
|
|
|
|
addEventListener("keyup", function(event) {
|
|
event.preventDefault();
|
|
var key = document.getElementById(event.code);
|
|
if(key) {
|
|
key.classList.remove("down");
|
|
key.classList.add("works");
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|