r42utils_js_FormResetter - R42 Utilities Wiki - R42 Utilities

概要

入力フォームの入力状態を最初の状態へ復元したり、全ての入力値をクリアします。

値の復元については、<input type="reset">でもある程度まで同じことが実現できます。

しかしこのクラスを使うと、以下の利点を得られます。

<form>で囲まれていない入力フォームについても、値の復元が可能です。
画面表示時の状態(onload直後)ではなく、任意の時点へ復元することが可能です。
textareaの復元に対応しています。(Firefox)
NarrowDownSelectionList.jsの復元に対応しています。

仕様

値の復元/クリアに対応しているタグは次の通りです。

inputタグ
selectタグ
textareaタグ

ただし、inputタグのtypeが

file
hidden
submit
reset
image
button

であるものについては、対応していません。これらのタグは単純に無視します。そもそも値の復元が不可能であるか、値を復元/クリアする必要がないためです。

また、一つの画面で同時に2つ以上のFormResetterを使うことはできません。

メソッド

saveFormState: その時点でHTMLドキュメントに含まれるすべての入力項目をチェックし、入力されている値をセーブします。
revertFormState: 最後にsaveFormStateを実行した時点の状態へ、フォームの入力値を復元します。
clearFormState: フォームの入力値をクリアします。

サンプルコード

 <html>
 
 <head>
 <script src="./FormResetter.js"></script>
 </head>
 
 <body>
 
     テキストフィールド <input type="text" value="123" />
     <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>

R42 Utilities

最近の更新 (Recent Changes)

2010-08-14

2010-05-01

2010-01-08

2009-11-29

最新檔案發佈

ページ一覧

Wikiガイド(Guide)

サイドバー (Side Bar)

概要

仕様

メソッド

サンプルコード