<input type="reset">は、<form>タグで囲まれた入力フォームの値を、onload時点へ復元するためのフォーム部品です。
しかし、使ったことがある方でしたらご存知かと思いますが。
機能が中途半端すぎるため、実用的ではありません。その中途半端っぷりを挙げてみると…
- formタグの中に囲まれた入力フォームしか復元してくれない
- Javascriptで動的に値を変えた入力フォームの値は復元の対象外。コレは致命的だと思います。
- textfieldの値を復元してくれない (Firefox系)
というわけで
フォーム値復元用ライブラリを自作しました。
r42utilsとして既にリリース済みです。もしご興味を持たれましたら、こちらからダウンロードをお願いします。
詳細についてはWikiをご覧頂ければと思いますが、使い方の例は次の通りです。
<html> <head> <script src="./FormResetter.js"></script> </head> <body> テキストフィールド <input type="text" value="123" /> <br /> <br /> テキストフィールド(Javascriptで値を動的にセット) <input type="text" value="" id="dynText" /> <script type="text/javascript"> document.getElementById("dynText").value = "abc"; </script> <br /> <br /> チェックボックス <input type="checkbox" checked="checked" /> <br /> <br /> <input type="radio" name="sample" checked="checked" />ラジオ1 <input type="radio" name="sample" />ラジオ2 <br /> <br /> リストボックス <select> <option></option> <option selected="selected">1</option> </select> <script> var formResetter = new FormResetter(document); // フォームの入力値を記録する。 formResetter.saveFormState(); </script> <br /> <br /> <input type="button" value="復元する" onclick="formResetter.revertFormState();" /> <input type="button" value="クリア" onclick="formResetter.clearFormState();" /> </body> </html>