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

HTMLで要素がユーザー入力を取得したときにスクリプトを実行する方法

要素がユーザー入力を受け取った瞬間にスクリプトを実行したい場合は、oninputイベント属性を使用します。oninputは、テキストフィールドやテキストエリアなどに入力が行われるたびに発生するイベントで、リアルタイムな入力チェックや表示の更新に便利です。

以下のコードは、oninput属性を使って入力内容を即座に画面に反映させる実装例です。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <p>下記に名前を入力してください：</p>
      <input type = "text" id = "myid" oninput="display()">
      <p id="test"></p>
      <script>
         function display() {
            var p = document.getElementById("myid").value;
            document.getElementById("test").innerHTML = "あなたの答えは「" + p + "」です";
         }
      </script>
   </body>
</html>

コードの解説

  • テキスト入力欄（<input type="text">）にoninput="display()"を設定することで、ユーザーが1文字入力するたびに関数display()が呼び出されます。
  • display()関数内では、document.getElementById()を使って入力欄の値（value）を取得し、その内容を<p id="test">要素のinnerHTMLに書き込んでいます。

onchangeとの違い

似たイベントとしてonchangeがありますが、onchangeは入力欄からフォーカスが外れたタイミングでしか発生しません。一方、oninputはキー入力のたびに即座に発生するため、入力内容をリアルタイムに処理したい場合に適しています。

  1. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

    HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実