JavaScript でキーボード入力を取得する 2025
この記事は2024/10/01に作成されました。
JavaScript では様々なイベントに対してリスナーを登録することができますが、一般的な Web サイト・システムを開発する際にキーボード入力に対してリアクションを取ることはよくあります。
そのほとんどは input や textarea に対する change, input イベントを利用することでしょう。直接なんのキーが入力されたかを取得するのではなく、あくまでユーザが入力した結果を取得することが一般的です。
しかし、時にはキーボード入力そのものに対してリアクションを取ることが必要になることもあります。その場合は keydown, keyup, keypress イベントを利用しますが、これらからは KeyboardEvent オブジェクトを取得することができます。
かつてはこの KeyboardEvent のプロパティである keyCode を用いてキーコードを取得し、その数値によって何のキーが押されたか判定することが一般的でした。
この前僕はある Web システムでキーボードショートカットを実装することになったので、改めて JavaScript でキーボード入力を取得する方法を調べてみました。
すると、今では keyCode は非推奨となっており、代わりのプロパティが用意されていました。今回はそれらプロパティを解説したいと思います。
テスト環境
以下のような HTML ファイルを用意してテストしてみました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KeyboardEvent properties</title>
<style>
dl {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0;
padding: 0;
}
div {
flex: 0 1 25%;
margin: 0;
padding: 0;
display: flex;
}
dt {
font-weight: bold;
width: 150px;
}
dd {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>KeyboardEvent properties</h1>
<section>
<h2>keydown</h2>
<dl>
<div>
<dt>.code</dt>
<dd id="event-down-code">----</dd>
</div>
<div>
<dt>.key</dt>
<dd id="event-down-key">----</dd>
</div>
<div>
<dt>.keyCode</dt>
<dd id="event-down-key-code">----</dd>
</div>
</dl>
<dl>
<div>
<dt>.ctrlKey</dt>
<dd id="event-down-ctrl-key">----</dd>
</div>
<div>
<dt>.metaKey</dt>
<dd id="event-down-meta-key">----</dd>
</div>
<div>
<dt>.shiftKey</dt>
<dd id="event-down-shift-key">----</dd>
</div>
<div>
<dt>.altKey</dt>
<dd id="event-down-alt-key">----</dd>
</div>
</dl>
<dl>
<div>
<dt>.isComposing</dt>
<dd id="event-down-is-complete">----</dd>
</div>
<div>
<dt>.repeat</dt>
<dd id="event-down-repeat">----</dd>
</div>
<div>
<dt>.location</dt>
<dd id="event-down-location">----</dd>
</div>
</dl>
</section>
<section>
<h2>keyup</h2>
<dl>
<div>
<dt>.code</dt>
<dd id="event-up-code">----</dd>
</div>
<div>
<dt>.key</dt>
<dd id="event-up-key">----</dd>
</div>
<div>
<dt>.keyCode</dt>
<dd id="event-up-key-code">----</dd>
</div>
</dl>
<dl>
<div>
<dt>.ctrlKey</dt>
<dd id="event-up-ctrl-key">----</dd>
</div>
<div>
<dt>.metaKey</dt>
<dd id="event-up-meta-key">----</dd>
</div>
<div>
<dt>.shiftKey</dt>
<dd id="event-up-shift-key">----</dd>
</div>
<div>
<dt>.altKey</dt>
<dd id="event-up-alt-key">----</dd>
</div>
</dl>
<dl>
<div>
<dt>.isComposing</dt>
<dd id="event-up-is-complete">----</dd>
</div>
<div>
<dt>.repeat</dt>
<dd id="event-up-repeat">----</dd>
</div>
<div>
<dt>.location</dt>
<dd id="event-up-location">----</dd>
</div>
</dl>
</section>
<div><textarea id="target-form"></textarea></div>
<script defer>
document.getElementById('target-form').addEventListener('keydown', function(event) {
document.getElementById('event-down-code').textContent = event.code;
document.getElementById('event-down-key').textContent = event.key;
document.getElementById('event-down-key-code').textContent = event.keyCode;
document.getElementById('event-down-ctrl-key').textContent = event.ctrlKey;
document.getElementById('event-down-meta-key').textContent = event.metaKey;
document.getElementById('event-down-shift-key').textContent = event.shiftKey;
document.getElementById('event-down-alt-key').textContent = event.altKey;
document.getElementById('event-down-is-complete').textContent = event.isComposing;
document.getElementById('event-down-repeat').textContent = event.repeat;
document.getElementById('event-down-location').textContent = event.location;
});
document.getElementById('target-form').addEventListener('keyup', function(event) {
document.getElementById('event-up-code').textContent = event.code;
document.getElementById('event-up-key').textContent = event.key;
document.getElementById('event-up-key-code').textContent = event.keyCode;
document.getElementById('event-up-ctrl-key').textContent = event.ctrlKey;
document.getElementById('event-up-meta-key').textContent = event.metaKey;
document.getElementById('event-up-shift-key').textContent = event.shiftKey;
document.getElementById('event-up-alt-key').textContent = event.altKey;
document.getElementById('event-up-is-complete').textContent = event.isComposing;
document.getElementById('event-up-repeat').textContent = event.repeat;
document.getElementById('event-up-location').textContent = event.location;
});
</script>
</body>
</html>
テキストエリアにフォーカスを当てた状態でキーボード入力を行うと、様々な情報が表示されます。
下記にも機能は同じものを用意してみました。
keydown
- .code
- ----
- .key
- ----
- .keyCode
- ----
- .ctrlKey
- ----
- .metaKey
- ----
- .shiftKey
- ----
- .altKey
- ----
- .isComposing
- ----
- .repeat
- ----
- .location
- ----
keyup
- .code
- ----
- .key
- ----
- .keyCode
- ----
- .ctrlKey
- ----
- .metaKey
- ----
- .shiftKey
- ----
- .altKey
- ----
- .isComposing
- ----
- .repeat
- ----
- .location
- ----
