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

JavaScriptのonkeyupイベントとは？使い方とサンプルコードをわかりやすく解説

onkeyupイベントの概要

onkeyupイベントは、ユーザーが押していたキーを離した（指を放した）瞬間に発生するJavaScriptのイベントです。テキストフィールドへの入力内容をリアルタイムに処理したい場合などに活用されます。

例えば、入力された文字を自動的に小文字に変換したり、検索ボックスに入力されるたびに候補を表示したりするようなインタラクティブな処理を実装することができます。

使用例

以下のコードでは、テキストボックスに英大文字で入力すると、キーを離したタイミングで自動的に小文字へ変換されます。実際に動作させて、onkeyupイベントの挙動を確認してみましょう。

<html>
   <head>
      <script>
         <!--
            function sayHello() {
               var str = document.getElementById("subject");
               str.value = str.value.toLowerCase();
            }
         //-->
      </script>
   </head>
   <body>
      <p>下のテキストボックスに大文字で入力してみてください。何が起こるか確認できます。</p>
      <input type = "text" onkeyup = "sayHello()" id = "subject">
   </body>
</html>

コードの解説

このサンプルでは、input要素にonkeyup属性を設定し、キーが離されるたびに関数sayHello()を呼び出しています。

関数内では、document.getElementById()によってテキストボックスの要素を取得し、toLowerCase()メソッドを使って入力値をすべて小文字に変換しています。その結果、大文字で入力しても、キーを離した直後に小文字へと自動的に変換されて表示されます。

まとめ

onkeyupイベントは「キーを離した瞬間」に発火するため、入力完了後の即時処理に適しています。似たイベントには、キーを押した瞬間に発生するonkeydownや、押している間に繰り返し発生するonkeypressがありますので、用途に応じて使い分けるとよいでしょう。

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

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

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

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