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

【JavaScript入門】押された文字キーを判定して表示する方法をわかりやすく解説

ユーザーがどの文字キーを押したのかを確認するには、window.eventとkeyCodeを組み合わせて使用します。本記事では、押されたキーの文字をアラートで表示するサンプルコードを交えて、実装手順と実行結果まで詳しく解説します。

サンプルコード

テキストボックスに対してonkeypressイベントを設定し、押されたキーのコード値から対応する文字を取り出しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<body>
<form>
<input type="text" onkeypress="return keyPressName(event)" />
</form>
<script>
    function keyPressName(myEventKeyName){
        var pressedKey;
        if(window.event){
            pressedKey = myEventKeyName.keyCode;
        } else if(myEventKeyName.which)
        {
            pressedKey = myEventKeyName.which;
        }
        alert(String.fromCharCode(pressedKey));
    }
</script>
</body>
</html>

プログラムの実行方法

上記のコードをファイル名「anyName.html（index.html）」として保存し、ファイルを右クリックしてください。VS Codeエディタを使用している場合は、「Open with Live Server」を選択することでブラウザ上で簡単に実行できます。

実行結果

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

【JavaScript入門】押された文字キーを判定して表示する方法をわかりやすく解説

ここで、文字「g」のキーを押してみましょう。すると、押されたキーの文字を示す次のようなアラートが表示されます。

【JavaScript入門】押された文字キーを判定して表示する方法をわかりやすく解説

文字「g」が表示されたアラートで「OK」ボタンをクリックすると、その文字がテキストボックスに入力され、次のような出力が得られます。

【JavaScript入門】押された文字キーを判定して表示する方法をわかりやすく解説

補足：より現代的なキー判定の方法

なお、keyCodeは現在では非推奨（deprecated）とされており、将来的な廃止が予定されています。モダンブラウザでは、イベントオブジェクトのkeyプロパティを使うことで、押されたキーの文字そのもの（例：「g」「Enter」「a」など）を直接取得できます。新しく開発を行う場合は、event.keyの利用を検討するとよいでしょう。

  1. 【Chrome DevTools】発生したJavaScriptイベントを確認する方法

    JavaScriptイベントの発火を確認する手順 Web開発をしていると、「この要素で実際にどのJavaScriptイベントが発火しているのか知りたい」という場面に出くわすことがあります。本記事では、Google Chromeのデベロッパーツール（DevTools）を使って、発生したJavaScriptイベントを簡単に特定する方法を解説します。 手順1：DevToolsを開く まず、Google Chromeを開き、F12キーを押してDevTools（デベロッパーツール）を起動します。Windowsでは「Ctrl + Shift + I」、Macでは「Cmd + Option + I」でも開く

  2. JavaScriptで要素が非表示になっているかどうかを確認する方法

    Webページの開発では、特定の要素が現在非表示になっているかどうか（display: none が適用されているか）を判定したい場面がよくあります。JavaScriptでこれを実現するには、window.getComputedStyle() メソッドを使うのが一般的です。このメソッドは、CSSスタイルシートで設定された実際の表示状態を取得できるため、確実に非表示状態をチェックできます。 実装例 以下は、ボタンをクリックすると非表示になっているDIV要素を表示するサンプルコードです。クリック時には、まず getComputedStyle() で要素が「none」になっているかどうかを確認してから