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

JavaScriptでESCキーの押下イベントを検出・処理する方法

ESCキー（エスケープキー）には、キーコード「27」が割り当てられています。この値を利用することで、ESCキーが押されたかどうかを簡単に判別できます。

実装例

以下のコードでは、jQueryのkeydownイベントを使って、ESCキーの押下を検出しています。

<!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>
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
</body>
<script>
    $(document).keydown(function (eventValue) {
        if (eventValue.keyCode == 27) {
            console.log("ESC key is pressed....");
        }
        else {
            console.log("Some other is key pressed....")
        }
    });
</script>
</html>

プログラムの実行方法

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

実行結果

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

JavaScriptでESCキーの押下イベントを検出・処理する方法

ここで、ESCキー以外の任意のキーを押してみます。

コンソール出力（ESC以外のキー）

ESC以外のキーが押された場合、コンソールには以下のように表示されます。

JavaScriptでESCキーの押下イベントを検出・処理する方法

続いて、ESCキーを押してみましょう。すると、コンソールの出力が以下のように変化します。

JavaScriptでESCキーの押下イベントを検出・処理する方法

補足：よりモダンな書き方について

なお、keyCodeプロパティは現在では非推奨（Deprecated）となっています。最新のブラウザ環境では、以下のようにevent.keyプロパティを使用する方法が推奨されています。

$(document).keydown(function (e) {
    if (e.key === "Escape") {
        console.log("ESC key is pressed....");
    } else {
        console.log("Some other is key pressed....");
    }
});

ポップアップウィンドウやダイアログを閉じる処理などにも応用できるため、用途に合わせて使い分けるとよいでしょう。

  1. CSSとJavaScriptでポップアップチャットウィンドウを作成する方法

    CSSとJavaScriptを組み合わせることで、Webサイトの右下から表示されるポップアップ型のチャットウィンドウを簡単に実装できます。本記事では、チャットボタンをクリックするとウィンドウが開き、「閉じる」ボタンで閉じられる仕組みを、実際のコード例とともにわかりやすく解説します。 実装例（完全なコード） 以下のコードでは、画面右下に固定配置された「Chat」ボタンを用意し、クリックするとチャットフォームがポップアップで表示される構造になっています。 <!DOCTYPE html> <html> <head> <meta name="view

  2. 【Python】Tkinterでポップアップウィンドウ（子ウィンドウ）を作成する方法

    TkinterのToplevelクラスとは？ TkinterにはToplevelクラスが用意されており、これを使うことでメインウィンドウとは別の独立したウィンドウ（トップレベルウィンドウ）を作成できます。トップレベルウィンドウは「子ウィンドウ」とも呼ばれ、ダイアログや設定画面などによく利用されます。 トップレベルウィンドウを作成するには、Toplevel(parent)のオブジェクトを生成します。このウィンドウは親オブジェクトのプロパティをすべて継承し、通常のウィンドウと同様に、ウィジェットやフレーム、キャンバスなどの各種オブジェクトを自由に配置できます。 サンプルコード：ボタンをクリックして