Fieldオブジェクト
【抜粋】 var Field = { clear: function() { for (var i = 0; i < arguments.length; i++) $(arguments[i]).value = ''; }, focus: function(element) { $(element).focus(); }, present: function() { for (var i = 0; i < arguments.length; i++) if ($(arguments[i]).value == '') return false; return true; }, select: function(element) { $(element).select(); }, activate: function(element) { element = $(element); element.focus(); if (element.select) element.select(); } }
入力フィールドを扱うオブジェクトです。主に、テキストボックス、テキストエリア、パスワード、ファイル送信フォームが対象となります(ただし、ファイル送信フォームの入力値は、スクリプトからは読み取り専用なので、clearメソッドは無効です)。例は最後にまとめます。
clearメソッド
引数の要素(ID指定可)すべての入力値をクリアします。
focusメソッド
引数の要素(ID指定可)にカーソルを移動します。
presentメソッド
引数の要素(ID指定可)すべての入力値が空でない場合にtrue、そうでない場合はfalseを返却します。prototype.jsにおける入力項目チェックに関する機能は、このpresentメソッドくらいです。他はありません・・・。
selectメソッド
引数の要素(ID指定可)の入力値を全選択します。
activateメソッド
引数の要素(ID指定可)にカーソルを移動後、要素にselectメソッドがあれば実行します。他のメソッドと違い、入力フィールド以外(チェックボックス等)も扱うことができます。
【例】 <html> <head> <title></title> <script language="javascript" src="prototype.js" charset="utf-8"></script> <script> <!-- function check(fm){ if(Field.present(fm.TEXT, fm.PASS, fm.FILE, fm.AREA)){ alert("すべて入力済み"); }else{ alert("未入力あり"); } } //--> </script> </head> <body> <form onsubmit="return false;"> <input type="text" name="TEXT" value="TESTBOX"/><br/> <input type="password" name="PASS" value="PASS"/><br/> <input type="file" name="FILE"/><br/> <textarea name="AREA">TEXTAREA TEXTAREA</textarea><br/> <input type="checkbox" name="CHECK"/><br/> <button onclick="Field.clear(this.form.TEXT, this.form.PASS);"> CLEAR TEXTBOX & TEXTAREA</button><br/> <button onclick="Field.focus(this.form.FILE);">FOCUS INPUT_FILE</button><br/> <button onclick="check(this.form);">CHECK</button><br/> <button onclick="Field.select(this.form.AREA);">SELECT TEXTAREA</button><br/> <button onclick="Field.activate(this.form.CHECK);">ACTIVATE</button><br/> <br/> <input type="reset"/><br/> </form> </body> </html>
id属性指定のほうがコードは簡潔になりますが、現実的にはname属性指定が多いと思うのでこうしました。個人的にはform.elements['name']で指定するほうが好みですが、こちらは簡潔にするため名前で直接指定してます^^;