JavaScriptでキー入力をマスター！総まとめ7選

はじめに
●JavaScriptでのキー入力とは
●キー入力イベントの種類
●キー入力イベントの使い方
●応用例とサンプルコード
●注意点と対処法
- ○ブラウザごとのキーイベントの違い
- ○キーイベントの伝播を防ぐ
●実践的なカスタマイズ方法
- ○サンプルコード7：キー入力の組み合わせを検出する
まとめ

はじめに

この記事を読めば、JavaScriptでキー入力を扱う方法を習得できるようになります。

初心者の方でも理解しやすいように、キー入力イベントの種類や使い方、注意点、対処法、カスタマイズ方法などを詳しく解説していきます。

また、実践的な応用例とサンプルコードも紹介していますので、ぜひ参考にしてください。

●JavaScriptでのキー入力とは

JavaScriptでキー入力を扱うとは、ユーザーがキーボードのキーを押したり、離したりした際に発生するイベントを検出し、それに応じた処理をプログラムで行うことです。

キー入力イベントは、主にウェブページの操作やゲーム開発、フォームの入力制限などで使用されます。

●キー入力イベントの種類

キー入力イベントには、主に3つの種類があります。

○keydownイベント

キーが押された瞬間に発生するイベントです。

継続的にキーを押し続けると、keydownイベントが繰り返し発生します。

○keypressイベント

keydownイベントの後に、キーが押されている間継続的に発生するイベントです。

ただし、非文字キー（Shift、Ctrl、Altなど）はkeypressイベントを発生させません。

○keyupイベント

キーが離された瞬間に発生するイベントです。

キーを離すまで発生しないため、キーが押されている間に何らかの処理を行いたい場合には向いていません。

●キー入力イベントの使い方

それぞれのキー入力イベントを使用する方法をサンプルコードとともに紹介します。

○サンプルコード1：keydownイベントを使ったキー入力の検出

下記のコードは、keydownイベントを使ってキー入力を検出する例です。

document.addEventListener('keydown', function(event) {
  console.log('キーが押されました：', event.key);
});

○サンプルコード2：keypressイベントを使ったキー入力の検出

下記のコードは、keypressイベントを使ってキー入力を検出する例です。

document.addEventListener('keypress', function(event) {
  console.log('キーが押されました：', event.key);
});

○サンプルコード3：keyupイベントを使ったキー入力の検出

下記のコードは、keyupイベントを使ってキー入力を検出する例です。

document.addEventListener('keyup', function(event) {
  console.log('キーが離されました：', event.key);
});

●応用例とサンプルコード

次に、キー入力イベントを活用した応用例とサンプルコードを紹介します。

○サンプルコード4：キー入力でテキストを操作する

下記のコードは、キー入力によってテキストを操作する例です。

矢印キーを使って、文字列の中のカーソル位置を移動させます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text">キー入力でテキストを操作するデモ</div>
    <script>
        const textElement = document.getElementById('text');
        let cursorPosition = 0;

        document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft') {
                cursorPosition = Math.max(0, cursorPosition - 1);
            } else if (event.key === 'ArrowRight') {
                cursorPosition = Math.min(textElement.textContent.length, cursorPosition + 1);
            }
            updateCursorPosition();
        });

        function updateCursorPosition() {
            const text = textElement.textContent;
            textElement.innerHTML = text.slice(0, cursorPosition) + '<span class="cursor">|</span>' + text.slice(cursorPosition);
        }
    </script>
</body>
</html>

○サンプルコード5：キー入力で画像を移動させる

下記のコードは、キー入力によって画像を移動させる例です。

矢印キーを使って、画像を上下左右に移動させます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #image {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <img id="image" src="example-image.jpg" alt="example image">
    <script>
        const imageElement = document.getElementById('image');
        let x = 0;
        let y = 0;
        const moveAmount = 10;

        document.addEventListener('keydown', function(event) {
            switch (event.key) {
                case 'ArrowUp':
                    y -= moveAmount;
                    break;
                case 'ArrowDown':
                    y += moveAmount;
                    break;
                case 'ArrowLeft':
                    x -= moveAmount;
                    break;
                case 'ArrowRight':
                    x += moveAmount;
                    break;
            }
            updateImagePosition();
        });

        function updateImagePosition() {
            imageElement.style.left = x + 'px';
            imageElement.style.top = y + 'px';
        }
    </script>
</body>
</html>

○サンプルコード6：キー入力でスライドショーを操作する

下記のコードは、キー入力によってスライドショーを操作する例です。

左右の矢印キーを使って、画像を切り替えます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slide {
            display: none;
        }
        .slide.active {
            display: block;
        }
    </style>
</head>
<body>
    <img class="slide active" src="example-image1.jpg" alt="example image 1">
    <img class="slide" src="example-image2.jpg" alt="example image 2">
    <img class="slide" src="example-image3.jpg" alt="example image 3">
    <script>
        const slides = document.getElementsByClassName('slide');
        let activeSlideIndex = 0;

        document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft') {
                changeSlide(-1);
            } else if (event.key === 'ArrowRight') {
                changeSlide(1);
            }
        });

        function changeSlide(direction) {
            slides[activeSlideIndex].classList.remove('active');
            activeSlideIndex += direction;
            if (activeSlideIndex < 0) {
                activeSlideIndex = slides.length - 1;
            } else if (activeSlideIndex >= slides.length) {
                activeSlideIndex = 0;
            }
            slides[activeSlideIndex].classList.add('active');
        }
    </script>
</body>
</html>

●注意点と対処法

キー入力イベントを扱う際の注意点と、それに対する対処法を紹介します。

○ブラウザごとのキーイベントの違い

ブラウザによっては、キーイベントの発生タイミングやキーコードが異なることがあります。

これを解決するために、event.key の代わりに event.code を使用するか、キーイベントの発生タイミングを調整することができます。

○キーイベントの伝播を防ぐ

キーイベントが他の要素やイベントリスナーに影響を与えることを防ぐために、event.stopPropagation() を使用してイベントの伝播を停止させることができます。

●実践的なカスタマイズ方法

ここでは、キー入力イベントを実践的にカスタマイズする方法を紹介します。

○サンプルコード7：キー入力の組み合わせを検出する

下記のコードは、特定のキー入力の組み合わせを検出する例です。

例として、CtrlキーとCキーが同時に押された場合に、コンソールにメッセージが表示されます。

let keysPressed = {};

document.addEventListener('keydown', function(event) {
    keysPressed[event.key] = true;

    if (keysPressed['Control'] && event.key === 'c') {
        console.log('Ctrl + C was pressed.');
    }
});

document.addEventListener('keyup', function(event) {
    delete keysPressed[event.key];
});

このコードでは、keydown イベントリスナーで押されているキーを keysPressed オブジェクトに格納し、keyup イベントリスナーでキーが離されたときに keysPressed オブジェクトから削除しています。

これにより、同時に押されているキーの組み合わせを検出することができます。