キーボードイベント について
前回の投稿で画面からキーボードでテキスト入力する時のイベントについて試しました。
その中でkeypress、input、keydown、keyupイベントについて、
それぞれ取得できるタイミングや値が異なることがわかりました。
また、主にキーボードで入力する際のイベントであるkeydown、keyupについて
keyCodeで押下したキー情報が取得できますが、このプロパティの他にkeyプロパティもあります。
このkeyプロパティは、入力した文字キーをそのまま取得することができます。
以下に簡単なサンプルを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
テキスト入力テスト
<input type="text" id="test1" name="test1">
<div>取得結果keydown</div>
<div id="keydown_result"></div>
<div>取得結果keyup</div>
<div id="keyup_result"></div>
<script type="text/javascript">
// DOM要素を取得
let test1_text = document.getElementById("test1");
// keydownのイベントハンドラを登録
test1_text.addEventListener('keydown', function(event) {
console.log("keydown start ------------------");
console.log("event keyCode -> " + event.keyCode);
console.log("event key -> " + event.key);
// コードから文字列を取得する
let text_str = String.fromCharCode(event.keyCode);
console.log("event text_str -> " + text_str);
let disp_text = "event keyCode -> " + event.keyCode + "<br />";
disp_text += "event key -> " + event.key + "<br />";
let result = document.getElementById("keydown_result");
result.innerHTML = disp_text + "<br />";
}, false);
// keyupのイベントハンドラを登録
test1_text.addEventListener('keyup', function(event) {
console.log("keyup start ------------------");
console.log("event keyCode -> " + event.keyCode);
console.log("event key -> " + event.key);
// コードから文字列を取得する
let text_str = String.fromCharCode(event.keyCode);
console.log("event text_str -> " + text_str);
let disp_text = "event keyCode -> " + event.keyCode + "<br />";
disp_text += "event key -> " + event.key + "<br />";
let result = document.getElementById("keyup_result");
result.innerHTML = disp_text + "<br />";
}, false);
</script>
</body>
</html>
画面にアクセスし、テキスト入力欄に「a」と入力してみます。
画面には入力したキー情報として、keyCode情報とkey情報が表示されます。
「a」以外にも他の文字キーを試してみると、それぞれの文字情報が取得できることがわかります。
また、文字入力の他、数値キー(テンキー)や、ファンクションキー、Enter、delete、半角全角キー、等のキー情報も
文字列として取得できることがわかります。