【JavaScript基礎】キーボード入力時に処理をする

JavaScriptにおける__「キーボード入力時に処理するイベント」__について、自己の忘備録としてまとめています。

参考URL

参考著書

文字を入力するたびに処理をする

キーの入力時に発生するイベントはkeydown、keyup、keypressで監視することができます。

イベント名	発生タイミング
keydown	キーが押されたとき
keyup	キーが離されたとき
keypress	文字を生成するキーが押されたとき

<!-- HTML -->
<textarea class="textarea"></textarea>

// JS
const textarea = document.querySelector('.textarea');

// キーが押されたとき
textarea.addEventListener('keydown', () => {
    console.log('キーが押されました。');
});

// 文字が入力された
textarea.addEventListener('keypress', () => {
    console.log('文字が入力されました。');
});

// キーが離されたとき
textarea.addEventListener('keyup', () => {
    console.log('キーが離されました。');
});

入力されたキーを調べる

KeyboardEventオブジェクトのプロパティを調べることで、入力されたキーの種類を判定できます。keydownやkeyupイベントと組み合わせて使用します。

プロパティ	意味	型
キーボードイベント.key	押されたボタンの値	文字列
キーボードイベント.code	押されたボタンのコード	文字列
キーボードイベント.altKey	Altキーが押されたかどうか	真偽値
キーボードイベント.ctrlKey	Ctrlキーが押されたかどうか	真偽値
キーボードイベント.shiftKey	Shiftキーが押されかどうか	真偽値
キーボードイベント.metaKey	metaキー※が押されたかどうか	真偽値
キーボードイベント.repeat	キーを押しっぱなしにしているかどうか	真偽値
キーボードイベント.isComposing	入力が未確定かどうか※	真偽値
※metaキーは、Macであれば⌘キーを指す。
※全角で日本語を入力中に、確定しない状態であればtrueとなる。

// JS
const textarea = document.querySelector('.textarea');

// キーが押されたとき
textarea.addEventListener('keyup', (event) => {
    // 出力例は「a」を押したととき
    console.log(event.key); //'a'
    console.log(event.code); //'KeyA'
    console.log(event.altKey); // false
    console.log(event.ctrlKey); // false
    console.log(event.shiftKey); // false
    console.log(event.metaKey); // false
    console.log(event.repeat); // false
    console.log(event.isComposing); // false
});

どのキーが押されたを判定するには、キーコードの数値を使用します。

const handleKeyDown = (event) => {
    // キーコード（どのキーが押されたか）を取得
    const keyCode = event.keyCode;

    if (keyCode === 39) {
        console.log('右キーが押されました。');
    }
};

window.addEventListener('keydown', handleKeyDown);