input を操作する

フォーム関連の操作はプログラムを作成する際にとても機会が多く、
重要となってくる部分です。
関連の動作は多岐に渡ると思いますが、ここに一例を紹介したいと思います。

テキスト入力時にプログラム実行

文字を打ち込んだ際に実行されます。
以下のプログラムでは、入力内容がpタグに転記されるはずです。

<input class="input" type="text" value="" placeholder="文字を入力してください">
  <p class="text"></p>
  <script>
    $(".input").keyup(function () {
      let inputVal = $(".input").val();
      $(".text").text(inputVal);
    });
  </script>

情報が変わった瞬間にプログラム実行

上のプログラムとほぼ同じ動きをします。
こちらは、inputタグの値が変わった瞬間に実行されるため、フォーカスが外れたときに発動します。
こちらの「.change」はセレクトタグでも便利に使えます。

<input class="input" type="text" value="" placeholder="文字を入力してください">
  <p class="text"></p>
  <script>
    $(".input").change(function () {
      let inputVal = $(".input").val();
      $(".text").text(inputVal);
    });
  </script>