想定される用途
テスト画面に繰り返しデータ入力を行うケース。
大量の入力欄に同じ内容を何度も入力するのは馬鹿馬鹿しい。
作業の日をまたぐ場合など、入力内容を保存してすぐ再現したい場合などに
入力内容を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 exclusionNames = new Array("inputValue", "outputValue", "outputId","outputName"); // ターゲット(テキスト、チェックボックス、リストボックス) var TARGET_FORM = "form > input[type='text'],input[type='checkbox'],select"; function csvInput() { // jQueryのSelectorsAPIで要素を抽出 var outputs = $(TARGET_FORM); var inputValue = $("input[name='inputValue']")[0].value; var inputs = inputValue.split(","); var isExists = false; var inputsCount = 0; for (var i=0;i<outputs.length;i++) { isExists = false; for (var j=0;j<exclusionNames.length;j++) { // 除外要素の場合は次の項目へ if (outputs[i].name == exclusionNames[j]) { isExists = true; break; } } if (isExists) { continue; } 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 csvOutput() { // jQueryのSelectorsAPIで要素を抽出 var inputs = $(TARGET_FORM); var outputValues = ""; var outputIds = ""; var outputNames = ""; var isExists = false; for (var i=0;i<inputs.length;i++) { isExists = false; for (var j=0;j<exclusionNames.length;j++) { // 除外要素の場合は次の項目へ if (inputs[i].name == exclusionNames[j]) { isExists = true; break; } } if (isExists) { continue; } if (inputs[i].type == "checkbox") { outputValues += inputs[i].checked + ","; } else { outputValues += inputs[i].value + ","; } outputIds += inputs[i].id + ","; outputNames += inputs[i].name + ","; } $("input[name='outputValue']")[0].value = deleteLastWard(outputValues); $("input[name='outputId']")[0].value = deleteLastWard(outputIds); $("input[name='outputName']")[0].value = deleteLastWard(outputNames); } function deleteLastWard(target) { return target.substring(0, target.length - 1); } </script> </head> <body> <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> CSV入力(I)<input type="text" name="inputValue" value="" accesskey="I" size="100"><br> CSV出力(O)<input type="text" name="outputValue" value="" accesskey="O" size="100"><br> id出力(1)<input type="text" name="outputId" value="" accesskey="1" size="100"><br> name出力(2)<input type="text" name="outputName" value="" accesskey="2" size="100"><br> <input type="button" id="" name="inputCsv" value="CSVより入力(3)" onClick="csvInput()" accesskey="3"> <input type="button" id="" name="outputCsv" value="CSVを出力(4)" onClick="csvOutput()" accesskey="4"> <hr> <pre> Chrome:Alt+I or O or 1〜4でキー操作可能 FireFox:Alt+Shift+I or O or 1〜4でキー操作可能 IE:Alt+I or O or 1〜4でキー操作可能 </pre> <hr> </form> </body> </html>