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

JavaScriptのonkeydownイベントとは？基本的な使い方をわかりやすく解説

JavaScriptのonkeydownイベントは、ユーザーがキーボードのキーを押した瞬間に発生するイベントです。テキスト入力欄やフォームなどで、キー操作に応じた処理を実行したい場合に広く使われています。

例えば、入力内容のリアルタイムチェックや、Enterキーが押されたときの送信処理、特定のショートカットキーの実装など、さまざまな場面で活用できます。

onkeydownイベントの使い方

最もシンプルなのは、HTML要素の属性として直接指定する方法です。以下のコードを実行して、onkeydownイベントの動きを確認してみましょう。

サンプルコード

次の例では、テキストボックス内で何らかのキーが押されると、アラートでメッセージが表示されます。

<html>
   <head>
      <script>
         <!--
            function sayHello() {
               alert("キーが押されました。")
            }
         //-->
      </script>
   </head>
   <body>
      <p>下のテキストボックスをクリックして、任意のキーを押してみてください。</p>
      <input type = "text" onkeydown = "sayHello()">
   </body>
</html>

このコードでは、<input>要素にonkeydown = "sayHello()"を指定することで、テキストボックスにフォーカスがある状態でキーが押されるたびに、sayHello()関数が呼び出されます。

補足：keydownとkeypressの違い

よく似たイベントにkeypressがありますが、両者には次のような違いがあります。

  • keydown：ShiftキーやCtrlキーなどの修飾キーを含む、すべてのキーで発生します。
  • keypress：実際に文字が入力されるキーに対してのみ発生します。

また、キーを押し続けている間、keydownイベントは繰り返し発生するという特徴もあります。キー操作全般を検知したい場合はonkeydownイベントを使うのが適しています。

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

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

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

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