読み込み中...

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

JavaScriptでキー入力を扱う方法を学ぶ初心者向けのイメージ JS
2024.03.22
この記事は約12分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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 オブジェクトから削除しています。

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

まとめ

この記事では、JavaScriptでキー入力を扱う方法、使い方、対処法、カスタマイズ方法を紹介しました。

サンプルコードを参考に、キー入力を使ったプロジェクトを開始することができます。

注意点やカスタマイズ方法も参考にして、より快適なユーザー体験を提供しましょう。