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

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

Webアプリケーションでは、ユーザーがEnterキーを押したタイミングで特定の処理を実行したい場面がよくあります。例えば、検索フォームで入力後に自動で検索を実行したり、チャット画面でメッセージを送信したりするケースです。

JavaScriptでは、onkeypressイベントとEnterキーのキーコード「13」を組み合わせることで、簡単にEnterキーの押下を検出できます。

基本的な実装方法

まず、HTML側のinput要素にonkeypress属性を設定し、キーが押されたときに呼び出す関数を指定します。

onkeypress="yourFunctionName"

次に、JavaScript側でイベントオブジェクトのkeyCodeが「13」（Enterキーのコード）かどうかを判定することで、押されたキーがEnterキーであるかを確認できます。

コード例

以下は、テキストボックスでEnterキーが押されたことをコンソールに出力するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enterキー検出デモ</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>

<input id="enterDemo" type="text" onkeypress="return enterKeyPressed(event)" />

<script>
    function enterKeyPressed(event) {
        if (event.keyCode == 13) {
            console.log("Enterキーが押されました");
            return true;
        } else {
            return false;
        }
    }
</script>
</body>
</html>

プログラムの実行方法

上記のコードを「index.html」などの名前で保存します。VS Codeを使用している場合は、ファイルを右クリックして「Open with Live Server」を選択すると、ブラウザ上で簡単に動作確認できます。

実行結果

ブラウザでページを開くと、テキスト入力欄が表示されます。

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

この状態でテキストボックス内にカーソルを置き、Enterキーを押すと、開発者ツール（Console）に以下のログが出力されます。

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

補足：より現代的な書き方

keyCodeは現在非推奨（Deprecated）となっているため、今後の開発ではevent.keyを使った以下のような記述が推奨されています。

document.getElementById("enterDemo")
    .addEventListener("keydown", function(event) {
        if (event.key === "Enter") {
            console.log("Enterキーが押されました");
        }
    });

keydownイベントとevent.key === "Enter"の組み合わせは、日本語入力（IME）の変換確定時にも意図しない発火を防ぐ工夫ができるなど、より柔軟な制御が可能です。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptでテキスト入力フィールドのEnterキー押下を検出する方法

    Enterキーの検出にはkeyCode 13を使用するJavaScriptでEnterキーを検出するには、keyCode 13を使用します。まず、テキスト入力フィールドを作成しましょう。<input type="text" id="txtInput">次に、jQueryのon()メソッドとkeyCodeを組み合わせて、Enterキーの押下を検出します。以下が完全なコード例です。コード例<!DOCTYPE html><html lang="en"><head><meta charse

  2. JavaScriptでEnterキー押下時にテキストボックスの内容を送信する方法

    Enterキーのキーコードは「13」です。JavaScriptでは、event.keyCode を使ってEnterキーが押されたかどうかを判定できます。キーボードイベント（keydown）をリスナーで監視し、keyCodeが13であればフォーム送信などの処理を実行する仕組みです。 以下に、テキストボックスでEnterキーが押されたときに送信処理を呼び出すサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&quo