jQueryで、フォームをリセットした時にテキストボックスの文字を【初期値の薄グレーの文字に戻す】やり方

こんにちは! 3年ぶりに北海道へ帰省したのに、大阪と気温が2℃くらいしか違わなくてやるせない いわだて (@dutchisover) です!

サンプルです。こんなイメージで




それぞれのテキストボックスに文字を入力してから リセット!ボタンを押すと、入力した文字が全てクリアされて、最初の文字(お名前、電話番号、ご住所)に戻ります。

コードです。

HTML

jQuery

初期値で入力されていて、フォーカスすると消える 薄グレーの文字は、前回の記事
jQueryでテキストボックスに文字を初期値として設定して、フォーカスすると消えるようにする
をご参考ください。

いちおう コードです

HTMLには <reset> タグはありますが...

<reset> タグを使用すると、こんなややこいコードを書かなくっても一発でリセットできてしまうんです。が、ブラウザやページの仕様によっては、Enterキーの誤動作などで リセットボタンを押してないのに リセットが効いてしまうことがあります。あったんです。

今回は私が HTMLの<reset>タグを使用せず、かつリセットを導入しないといけない事態に遭遇してしまったので やりくりしたコードを記述しておきました。

コードの解説です

おおざっぱに流れを説明すると、

テキストボックスの初期値(value)をひとつずつ取得

配列(今回は inputBox)にして格納しておく

リセット!が押されたら ひとつずつ戻す

という感じにしました。

そのために まずはテキストボックスの総数をカウントします。あとでfor文にして順繰りで値を取ったり戻したりするためです。

つづいて、テキストボックスの初期値(value)を全て取得します。HTMLで記述されている順にテキストボックスの初期値を取得します。さきほど取得した総数の回数分、1個1個取得していきます。

これでリセット!を押した際に戻す値をゲットできました。
あとは戻すだけです。

できました!(*´꒳`*)
やや力技感が否めませんが、とりあえず思った通りに動くことが大事!と思います
以上です!

Sponsored