このページでは、JavaScriptのonkeydownイベントハンドラについて、基本的な仕組みから応用例まで詳しく説明します。

onkeydownとは

onkeydownは、キーボードのキーが押されたときに発生するイベントを処理するためのイベントハンドラです。このイベントは、キーが押された瞬間に発火し、押されたキーに対応する情報を取得することができます。

例えば、入力フィールドやドキュメント全体に対して設定することで、特定のキー入力を検知してカスタム処理を実行することが可能です。

例を見る

基本的な使い方

onkeydownを使用する最も基本的な方法は、HTML要素の属性として直接指定する方法です。

<input type="text" onkeydown="alert('キーが押されました')">

このコードでは、入力フィールドでキーが押されるたびにアラートが表示されます。

イベントオブジェクトについて

イベントオブジェクトについて

onkeydownイベントが発生すると、イベントオブジェクトが渡されます。このオブジェクトには、押されたキーに関する情報が含まれています。

• event.key: 押されたキーの文字列を返します（例: “a”, “Enter”）。
• event.code: 物理的なキーを特定するコードを返します（例: “KeyA”, “Enter”）。
• event.altKey, event.ctrlKey, event.shiftKey: 修飾キーが押されているかを示します。

例:

<script>
document.addEventListener('keydown', function(event) {
    console.log('押されたキー:', event.key);
    console.log('キーコード:', event.code);
    if (event.ctrlKey) {
        console.log('Ctrlキーが押されています');
    }
});
</script>

デフォルト動作の抑制

デフォルト動作の抑制

特定のキー入力でブラウザのデフォルト動作を抑制するには、event.preventDefault()を使用します。

例えば、フォームでEnterキーが押されたときに送信を防ぎたい場合:

<form>
    <input type="text" onkeydown="if(event.key === 'Enter') event.preventDefault()">
</form>

例を見る

応用例

入力制限をかける

特定のキーだけを許可し、それ以外の入力を無効にする例:

<input type="text" onkeydown="if(!/[0-9]/.test(event.key) && event.key !== 'Backspace') event.preventDefault()">

このコードでは、数字とBackspaceキー以外の入力をすべて無効にします。

キーボードショートカットを作る

Ctrl+Sでカスタム処理を実行する例:

<script>
document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        alert('Ctrl+Sが押されました');
    }
});
</script>

リアルタイムでキー入力を表示する

押されたキーをリアルタイムで画面に表示する例:

<div id="output"></div>
<script>
document.addEventListener('keydown', function(event) {
    document.getElementById('output').textContent = '押されたキー: ' + event.key;
});
</script>

ゲーム操作を実装する

矢印キーでキャラクターを動かす例:

<script>
let position = { x: 0, y: 0 };
document.addEventListener('keydown', function(event) {
    switch (event.key) {
        case 'ArrowUp':
            position.y -= 10;
            break;
        case 'ArrowDown':
            position.y += 10;
            break;
        case 'ArrowLeft':
            position.x -= 10;
            break;
        case 'ArrowRight':
            position.x += 10;
            break;
    }
    console.log('キャラクターの位置:', position);
});
</script>

よくある間違い

onkeydownを使用する際に注意すべき点:

• キー入力の大文字と小文字を区別する場合、event.keyを正しく処理する必要があります。
• 複数の修飾キーが押された場合、条件を正確に組み合わせる必要があります。
• イベントリスナーを設定するタイミングに注意が必要です（DOMContentLoaded後が推奨）。

最初に戻る