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

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

oninputイベントは、テキストボックスなどの入力フィールドにユーザーが値を入力したタイミングで発生するJavaScriptのイベントです。文字を入力したり削除したりするたびに即座に処理が実行されるため、入力内容のリアルタイム表示やバリデーションなど、インタラクティブなWebページを作成する際に非常に便利です。

oninputイベントの基本的な実装例

以下のコードでは、テキストボックスに入力された内容を取得し、その場ですぐに画面へ表示しています。

<!DOCTYPE html>
<html>
   <body>
      <p>下に入力してください：</p>
      <input type = "text" id = "newInput" oninput = "inputFunc()">
      <p id = "demo"></p>
      <script>
         function inputFunc() {
            var a = document.getElementById("newInput").value;
            document.write("Typed: " + a);
         }
      </script>
   </body>
</html>

コードのポイント

  • <input>要素の属性としてoninput = "inputFunc()"を指定することで、入力のたびに関数が呼び出されます。
  • 関数内ではdocument.getElementById()を使って入力値を取得し、valueプロパティから現在のテキストを参照しています。
  • 取得した値はdocument.write()によって画面に出力されます。

onchangeイベントとの違い

似たようなイベントにonchangeがありますが、両者には重要な違いがあります。
onchangeイベントは入力フィールドからフォーカスが外れたとき（確定時）に発生しますが、oninputイベントはキーを押すたび、つまり値が変化するたびに発生します。リアルタイム性が必要な処理にはoninputを選択しましょう。


  1. JavaScriptにおけるscreenYマウスイベントの役割とは？

    JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。 この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。 screenYの主な特徴 マウスポインタの垂直座標（Y座標）をピクセル単位で返す 画面の左上を基準点（0, 0）とする clientY とは異なり、ブラウザの表示領域ではなく画面全体が

  2. JavaScriptのevery()メソッドとは？使い方とサンプルコードをわかりやすく解説

    JavaScriptの配列（Array）メソッドである every() は、配列内のすべての要素が、指定した関数によるテスト条件を満たしているかどうかを判定するメソッドです。 判定結果はブール値（真偽値）として返されます。 すべての要素が条件を満たす場合 → true 1つでも条件を満たさない要素がある場合 → false every()メソッドのパラメータ every()メソッドでは、以下の2つの引数を使用できます。 callback − 各要素に対して実行されるテスト用の関数です。この関数が false を返すと、その時点で処理が中断され、every()全体が false を返します