想定される用途
テスト画面に繰り返しデータ入力を行うケース。
大量の入力欄に同じ内容を何度も入力するのは馬鹿馬鹿しい。
作業の日をまたぐ場合など、入力内容を保存してすぐ再現したい場合などに
入力内容をCSVで読み書き出来ると便利です。
また、入力作業としてもブラウザに直接入力するよりも
高性能なエディタでテキスト編集するほうが画面に入力するよりもスムーズです。
要件
全般ルール
・formタグ内の入力項目を設定対象とする
・設定対象は、テキストボックス・チェックボックス・リストボックスとする
・当処理で利用する入出力項目は処理対象外とする
サンプルコード
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" src="../JQuery/jquery.js"></script> <script type="text/javascript"> // ターゲット(テキスト、チェックボックス、リストボックス) var TARGET_FORM = "input[type='text'],input[type='checkbox'],select"; function csvInput() { // jQueryのSelectorsAPIで要素を抽出 var outputs = $(TARGET_FORM); var inputValue = window.prompt("", ""); var inputs = inputValue.split(","); var isExists = false; var inputsCount = 0; for (var i=0;i<outputs.length;i++) { isExists = false; if (outputs[i].type == "checkbox") { if (inputs[inputsCount] == "true") { outputs[i].checked = true; } else if (inputs[inputsCount] == "false") { outputs[i].checked = false; } } else { outputs[i].value = inputs[inputsCount]; } inputsCount++; } } function csvOutputValue() { // jQueryのSelectorsAPIで要素を抽出 var inputs = $(TARGET_FORM); var outputValues = ""; for (var i=0;i<inputs.length;i++) { if (inputs[i].type == "checkbox") { outputValues += inputs[i].checked + ","; } else { outputValues += inputs[i].value + ","; } } $("#output")[0].innerText = deleteLastWard(outputValues); } function csvOutputName() { // jQueryのSelectorsAPIで要素を抽出 var inputs = $(TARGET_FORM); var outputNames = ""; for (var i=0;i<inputs.length;i++) { outputNames += inputs[i].name + ","; } $("#output")[0].innerText = deleteLastWard(outputNames); } function deleteLastWard(target) { return target.substring(0, target.length - 1); } </script> </head> <body> <div id="output" style="background-color:yellow;"></div> <form action="" name="form1"> チェック1<input type="checkbox" name="chk1" id="checkTest1" value=""><br> チェック2<input type="checkbox" name="chk2" id="checkTest2" value=""><br> テキスト1<input type="text" name="txt1" value="" id="txt1"><br> テキスト2<input type="text" name="txt2" value="" id="txt2"><br> リスト1<select name="select1" id="sel1"> <option value="1">リスト1_1</option> <option value="2">リスト1_2</option> <option value="3">リスト1_3</option> <option value="4">リスト1_4</option> <option value="5">リスト1_5</option> </select><br> リスト2<select name="select2" id="sel2"> <option value="1">リスト2_1</option> <option value="2">リスト2_2</option> <option value="3">リスト2_3</option> <option value="4">リスト2_4</option> <option value="5">リスト2_5</option> </select> <hr> <input type="button" id="" name="inputCsv" value="CSVより入力(3)" onClick="csvInput()" accesskey="3"> <input type="button" id="" name="outputCsvValue" value="CSV(value)を出力(4)" onClick="csvOutputValue()" accesskey="4"> <input type="button" id="" name="outputCsvName" value="CSV(id)を出力(5)" onClick="csvOutputName()" accesskey="5"> <hr> <pre> Chrome:Alt+3〜5でキー操作可能 FireFox:Alt+Shift+3〜5でキー操作可能 IE:Alt+3〜5でキー操作可能 </pre> <hr> </form> </body> </html>