フォーム関連の操作はプログラムを作成する際にとても機会が多く、
重要となってくる部分です。
関連の動作は多岐に渡ると思いますが、ここに一例を紹介したいと思います。
テキスト入力時にプログラム実行
文字を打ち込んだ際に実行されます。
以下のプログラムでは、入力内容が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>