KeyboardEventとCompositionEventの挙動を確認するデモページ
上のtextareaにfocusを当てた状態でキーを押すと、下のtextareaに発火したeventが記録される
自動でスクロールされる
resetを押すと記録が削除される
code:demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KeyboardEvent & CompositionEvent</title>
<script type="module">
const textarea = document.getElementById("input");
const view = document.getElementById("debug");
const handleKey = (e) => {
console.debug(e);
view.value += ${e.type}\t${+e.shiftKey}${+e.ctrlKey}${+e.altKey}${+e.metaKey} ${e.key} ${e.code}${e.repeat ? "+" : ""} ${e.isComposing ? "IME" : ""}\n;
view.scrollTop = view.scrollHeight;
};
textarea.addEventListener("keydown", handleKey);
textarea.addEventListener("keyup", handleKey);
const handleComposition = (e) => {
console.debug(e);
view.value += ${e.type}\t${e.data}\n;
view.scrollTop = view.scrollHeight;
};
textarea.addEventListener("compositionstart", handleComposition);
textarea.addEventListener("compositionupdate", handleComposition);
textarea.addEventListener("compositionend", handleComposition);
document.getElementById("reset").addEventListener("click", () => {
view.value = "";
});
</script>
</head>
<body>
<textarea id="input" rows="10" cols="70"></textarea>
<br>
<textarea id="debug" rows="10" cols="70" readonly="true"></textarea>
<br>
<button id="reset">reset</button>
</body>
</html>
メモ