Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

jQueryで全ての入力欄にCSV形式のデータを設定(入力ダイアログから入力、DIVタグへの出力版)

概要

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

想定される用途

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

要件

全般ルール

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

出力ルール

・現在入力されている内容がCSV形式でDIVタグ内に出力される
・入力項目のnameがCSV形式でDIVタグ内に出力される(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 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>

画像

初期表示

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

入力ダイアログにCSV形式の文字列を設定

入力ボタン押下後