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

JavaScriptのonkeypressイベントとは？基本的な使い方とサンプルコード

onkeypressイベントは、キーが押されてから離された（押して放した）タイミングで発生するイベントです。テキスト入力欄などでユーザーがキー操作を行った瞬間に処理を実行したい場合に利用されます。

なお、onkeypressイベントは現在では非推奨（deprecated）とされており、より柔軟に制御できるkeydownイベントやkeyupイベントの使用が推奨されています。ただし、レガシーなコードや古いブラウザ向けの実装では今も登場するため、基本的な仕組みを理解しておくことは重要です。

onkeypressイベントの基本構文

HTML要素に対して直接属性として指定する方法が最もシンプルです。

<input type="text" onkeypress="関数名()">

サンプルコード

以下の例では、テキスト入力欄でキーを押して離すたびに、アラートで「キーが押されました」というメッセージを表示します。実際に動作を確認してみましょう。

Example

<html>
   <head>
      <script>
         <!--
            function sayHello() {
               alert("キーが押されました。")
            }
         //-->
      </script>
   </head>
   <body>
      <p>下の入力欄で任意のキーを押してください：</p>
      <input type = "text" onkeypress = "sayHello()">
   </body>
</html>

動作のポイント

  • onkeypressイベントは、キーが押されて離されたときに発火します。
  • 主に文字キー（アルファベットや数字など）が対象となり、ShiftやAltなどの修飾キー単体では発生しません。
  • 新しい実装ではaddEventListener('keydown', ...)を使うことで、より細かいキー操作の検出が可能です。

まずは上記のサンプルコードを実行して、onkeypressイベントの基本的な挙動をつかんでみてください。

  1. JavaScriptのoninputイベントとは？基本的な使い方を実例付きで解説

    oninputイベントは、テキストボックスなどの入力フィールドにユーザーが値を入力したタイミングで発生するJavaScriptのイベントです。文字を入力したり削除したりするたびに即座に処理が実行されるため、入力内容のリアルタイム表示やバリデーションなど、インタラクティブなWebページを作成する際に非常に便利です。 oninputイベントの基本的な実装例 以下のコードでは、テキストボックスに入力された内容を取得し、その場ですぐに画面へ表示しています。 <!DOCTYPE html> <html>    <body>  &

  2. JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説

    イベントキャプチャ（Event Capturing）とはイベントキャプチャとは、発生したイベントがDOMツリーの最上位要素からターゲット要素へと向かって伝播していく仕組みのことです。これは、ターゲット要素から最上位要素へと逆方向にイベントが伝わるイベントバブリング（Event Bubbling）とは正反対の動作になります。なお、DOMにおけるイベント伝播は「キャプチャフェーズ」「ターゲットフェーズ」「バブリングフェーズ」の3段階に分かれており、イベントキャプチャはその最初の段階に相当します。windowやdocumentなどの上位ノードから順に、下位ノードへとイベントが降りていくイメージです。