Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

jQueryで全ての入力欄にCSV形式のデータを設定

概要

jQueryで全ての入力欄にCSV形式のデータを設定します。

想定される用途

テスト画面に繰り返しデータ入力を行うケース。
大量の入力欄に同じ内容を何度も入力するのは馬鹿馬鹿しい。
作業の日をまたぐ場合など、入力内容を保存してすぐ再現したい場合などに
入力内容をCSVで読み書き出来ると便利です。
また、入力作業としてもブラウザに直接入力するよりも
高性能なエディタでテキスト編集するほうが画面に入力するよりもスムーズです。

要件

全般ルール

・formタグ内の入力項目を設定対象とする
・設定対象は、テキストボックス・チェックボックス・リストボックスとする
・当処理で利用する入出力項目は処理対象外とする

出力ルール

・現在入力されている内容がCSV形式で出力テキスト欄に出力される
・入力項目のidがCSV形式でidラベル欄に出力される(CSVの見出しに利用)
・入力項目のnameがCSV形式でnameラベル欄に出力される(CSVの見出しに利用)

入力ルール

・入力テキスト欄にCSV形式で入力されたデータを各入力項目に反映する。
チェックボックスにtrue、false以外の値を設定した場合は現状の表示のままにする

サンプルコード

<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>

画像

初期表示

出力ボタン押下(もしくはAlt+4)

入力テキストにCSV形式の文字列を設定して、入力ボタン押下(もしくはAlt+3)