JavaScriptキーボードイベント解説

概要: このチュートリアルでは、keydown、keypress、keyupを含むJavaScriptキーボードイベントの使用方法を学習します。

JavaScriptキーボードイベント入門

キーボードを操作すると、キーボードイベントが発生します。主なキーボードイベントは3つあります。

keydown – キーボードのキーを押したときに発生し、キーを押し続けている間は繰り返し発生します。
keyup – キーボードのキーを離したときに発生します。
keypress – a、b、cなどの文字キーを押したときに発生します。左矢印キー、ホームキー、エンドキーなどは対象外です。keypressも、キーを押し続けている間は繰り返し発生します。

キーボードイベントは通常、テキストボックスで発生しますが、すべての要素でサポートされています。

キーボードで文字キーを1回押すと、次の順序で3つのキーボードイベントが発生します。

keydown
keypress
keyup

keydownイベントとkeypressイベントはどちらも、テキストボックスに変更が加わる前に発生します。一方、keyupイベントは、テキストボックスに変更が加わった後に発生します。文字キーを押し続けると、キーを離すまでkeydownとkeypressが繰り返し発生します。

文字以外のキーを押すと、最初にkeydownイベントが発生し、次にkeyupイベントが発生します。文字以外のキーを押し続けると、キーを離すまでkeydownが繰り返し発生します。

キーボードイベントの処理

キーボードイベントを処理するには、次の手順に従います。

最初に、キーボードイベントが発生する要素を選択します。通常はテキストボックスです。
次に、element.addEventListener()を使用してイベントハンドラーを登録します。

idがmessageのテキストボックスがあるとします。

<input type="text" id="message">Code language: HTML, XML (xml)

キーボードイベントリスナーの登録方法を以下に示します。

let msg = document.getElementById('#message');

msg.addEventListener("keydown", (event) => {
    // handle keydown
});

msg.addEventListener("keypress", (event) => {
    // handle keypress
});

msg.addEventListener("keyup", (event) => {
    // handle keyup
});Code language: JavaScript (javascript)

文字キーを押すと、3つのイベントハンドラーすべてが呼び出されます。

キーボードイベントのプロパティ

キーボードイベントには、keyとcodeという2つの重要なプロパティがあります。keyプロパティは押された文字を返し、codeプロパティは物理的なキーコードを返します。

例えば、z文字キーを押すと、event.keyはzを返し、event.codeはKeyZを返します。

次の例を参照してください。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Keyboard Events: Key/Code</title>
</head>
<body>
    <input type="text" id="message">

    <script>
        let textBox = document.getElementById('message');
        textBox.addEventListener('keydown', (event) => {
            console.log(`key=${event.key},code=${event.code}`);

        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

z文字を入力すると、次のメッセージが表示されます。

key=z,code=KeyZ

動作原理

最初に、getElementById()メソッドを使用して、idがmessageのテキストボックスを選択します。
次に、keydownイベントリスナーを登録し、押されたキーのキーとコードをログに記録します。

まとめ

キーボードで文字キーを押すと、keydown、keypress、keyupイベントが順番に発生します。ただし、文字以外のキーを押すと、keydownとkeyupイベントのみが発生します。
キーボードeventオブジェクトには、押されたキーを検出できる2つの重要なプロパティ、keyプロパティとcodeプロパティがあります。
keyプロパティは押されたキーの値を返し、codeはキーボード上の物理的なキーを表します。

このチュートリアルは役に立ちましたか？