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

【JavaScript】Enterキーが押されたかどうかを判定してコンソールに結果を表示する方法

onkeypressイベントでEnterキーの押下を検出する

Enterキーが押されたかどうかを判定し、その結果をコンソールに出力するには、onkeypressイベントを使用します。まず、テキスト入力ボックスを作成してみましょう。

<input id="textBox" type="text" onkeypress="return demoForEnterKey(event)"/>

続いて、demoForEnterKey()関数の実装方法を見ていきましょう。Enterキーが押されたかどうかは、イベントオブジェクトのkeyCodeの値が「13」であるかどうかで判定できます（13はEnterキーに割り当てられたキーコードです）。

function demoForEnterKey(eventName) {
    if (eventName.keyCode == 13) {
        var t = document.getElementById("textBox");
        console.log(t.value);
        console.log("Enterキーが押されました.....")
        return true;
    } else {
        console.log("Enterキーは押されていません.....")
        return false;
    }
}

この関数では、Enterキーが押された場合に入力ボックスの値を取得してコンソールに表示し、trueを返します。それ以外のキーが押された場合は、その旨をコンソールに出力してfalseを返します。

完全なサンプルコード

以下に、HTML全体のコードを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="textBox" type="text" onkeypress="return demoForEnterKey(event)" />
<script>
    function demoForEnterKey(eventName) {
        if (eventName.keyCode == 13) {
            var t = document.getElementById("textBox");
            console.log(t.value);
            console.log("Enterキーが押されました.....")
            return true;
        } else {
            console.log("Enterキーは押されていません.....")
            return false;
        }
    }
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「index.html」として保存し、ファイルを右クリックしてください。VS Codeエディターの場合は、「Open with Live Server」オプションを選択するとブラウザーでページを開けます。

実行結果

プログラムを実行すると、以下のような画面が表示されます。

【JavaScript】Enterキーが押されたかどうかを判定してコンソールに結果を表示する方法

テキストボックスに何かを入力した状態でEnterキーを押すと、開発者ツールのコンソールに以下のような出力が表示されます。

【JavaScript】Enterキーが押されたかどうかを判定してコンソールに結果を表示する方法

補足：event.keyを使ったモダンな書き方

keyCodeプロパティは現在非推奨（Deprecated）となっているため、新しいプロジェクトではevent.keyを使う方法が推奨されます。addEventListenerと組み合わせると、より読みやすく将来性のあるコードになります。

document.getElementById("textBox").addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        console.log(this.value);
        console.log("Enterキーが押されました");
    } else {
        console.log("Enterキーは押されていません");
    }
});

このように、従来のkeyCode == 13による判定でも動作しますが、event.key === "Enter"の方が意図が明確で可読性も高いため、今後の開発ではこちらを採用するとよいでしょう。

  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のprompt()で入力した値を条件式で評価する方法

    prompt()で入力した値をJavaScriptの条件式で評価する JavaScriptでは、prompt()メソッドを使ってユーザーから値を入力してもらい、その値を条件式（if文）で評価することができます。この記事では、2つの数値を入力して掛け算した結果を条件判定する具体例を解説します。 ポイントは、parseInt()を使って入力された文字列を数値に変換している点です。prompt()の戻り値は常に文字列のため、そのまま計算すると意図しない結果になる可能性があります。 var firstvalue = parseInt(prompt(Enter the value1)); var sec