JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでキー押下を検出する最も簡単な方法

JavaScriptでキー入力（キープレス）を検出する最も簡単な方法は、onkeypressイベントハンドラを使うことです。

document.onkeypress

押されたキーはkeyCodeプロパティと照合されます。このプロパティは、onkeypressイベントを発生させたキーのUnicode文字コードを返します。たとえば、Enterキーであれば「13」という値になります。

コード例

以下は、Enterキーの押下を検出し、それ以外のキーが押された場合にはその文字をコンソールに表示するサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<script>
    document.onkeypress = function (eventKeyName) {
        eventKeyName = eventKeyName || window.event;
        if(eventKeyName.keyCode==13){
            console.log('You have pressed enter key');
        } else {
            alert(String.fromCharCode(eventKeyName.keyCode))
        }
    };
</script>
</body>
</html>

上記のプログラムを実行するには、ファイル名を「anyName.html（index.html）」として保存し、VS Codeエディタ上でそのファイルを右クリックして、「Open with Live Server」オプションを選択します。

実行結果

プログラムを実行すると、次のような出力が得られます。

ケース1 − ENTERキーを押すと、コンソールに次のメッセージが出力されます。

JavaScriptでキー押下を検出する最も簡単な方法

ケース2 − ENTER以外のキー（たとえばアルファベットの「g」など）を押した場合も、その内容がコンソールに表示されます。

JavaScriptでキー押下を検出する最も簡単な方法

補足：モダンな実装について

なお、onkeypressイベントやkeyCodeプロパティは現在では非推奨（deprecated）とされており、最新のブラウザではaddEventListenerメソッドとkeydown／keyupイベント、およびe.keyプロパティを使うことが推奨されています。例えば、次のように記述します。

document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        console.log('You have pressed enter key');
    } else {
        console.log(event.key);
    }
});

レガシー環境との互換性が必要な場合を除き、新しいプロジェクトではこちらの方法を採用するのがよいでしょう。

  1. JavaScriptでEnterキーの押下イベント（keypress）を検出する方法

    Webアプリケーションでは、ユーザーがEnterキーを押したタイミングで特定の処理を実行したい場面がよくあります。例えば、検索フォームで入力後に自動で検索を実行したり、チャット画面でメッセージを送信したりするケースです。 JavaScriptでは、onkeypressイベントとEnterキーのキーコード「13」を組み合わせることで、簡単にEnterキーの押下を検出できます。 基本的な実装方法 まず、HTML側のinput要素にonkeypress属性を設定し、キーが押されたときに呼び出す関数を指定します。 onkeypress=yourFunctionName 次に、JavaScript側でイ

  2. JavaScriptで矢印キーの押下を検出する方法

    JavaScriptで矢印キーの押下を検出するには、onkeydownイベントを使用します。各キーには固有のキーコードが割り当てられており、矢印キーの場合は次の通りです。左矢印キーは「37」、上矢印キーは「38」、右矢印キーは「39」、下矢印キーは「40」です。押されたキーのkeyCodeをswitch文などで判定することで、どの矢印キーが押されたかを識別できます。サンプルコード以下に具体的な実装例を示します。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8&g