前提・実現したいこと

JavaScriptで入力フォームの内容をtextファイルで保存するhtmlを作成しました。
逆に、入力フォームが空のときに値が入力されたtextファイルを読み込み、自動でフォームに値を入力することは可能でしょうか。
ざっくりとした質問で申し訳ないのですが、簡単なヒントでも構わないので、教えていただけると幸いです。

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Form内容のファイル出力ツール</title>
6    <h1>Form内容のファイル出力ツール</h1>
7    <script>
8        function dispText() {
9            var text = "'" +
10                document.formname.a001.value + "','" +
11                document.formname.a002.value + "','" +
12                document.formname.a003.value + "','" +
13                document.formname.a004.value + "','" +
14                document.formname.a005.value + "'";
15            var blob = new Blob([text], { "type": "text/plain" });
16
17            //IEの場合
18            if (window.navigator.msSaveBlob) {
19                window.navigator.msSaveBlob(blob, "outFileFromWindows.txt");
20                //IE以外の場合
21            } else {
22                document.getElementById("createFile").href = window.URL.createObjectURL(blob);
23            }
24        }
25    </script>
26</head>
27<body>
28    <form name="formname" id="id_form" action="">
29        <label id="001">Form1 : </label>
30        <input type="text" name="a001" size="30" maxlenglabel="30" value="">
31        <br>
32        <label id="002">Form2 : </label>
33        <input type="text" name="a002" size="30" maxlenglabel="30" value="">
34        <br>
35        <label id="003">Form3 : </label>
36        <input type="number" name="a003" size="30" maxlenglabel="30" value="">
37        <br>
38        <label id="004">Form4 : </label>
39        <input type="number" name="a004" size="8" maxlenglabel="8" value="">
40        <br>
41        <label id="005">Form5 : </label>
42        <input type="number" name="a005" size="30" maxlenglabel="30" value="">
43        <br>
44
45        <a id="createFile" href="#" download="outFile.txt" value="ファイル作成" onclick="dispText()">ファイル作成</a>
46    </form>
47</body>
48</html>

試したこと

ファイルの読み込み方法を調べました。

[追記]
現在、textareaの1つの部分にtextファイルの内容を表示させるというのができました。
複数のtextareaに分けて表示させる方法が知りたいです。

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <title>Document</title>
7</head>
8
9<body>
10  <p>.txtファイルを選択してください</p>
11  <input type="file" id="sample"><br><br>
12  <textarea id="text" rows="10" cols="30" readonly></textarea>
13</body>
14<script>
15    const sample = document.getElementById("sample");
16    const text = document.getElementById("text")
17
18    //ダイアログでファイルが選択された時
19    sample.addEventListener("change", function (event) {
20
21      const file = event.target.files;
22
23      //FileReaderの作成
24      const reader = new FileReader();
25      //テキスト形式で読み込む
26      reader.readAsText(file[0]);
27
28      //読込終了後の処理
29      reader.onload = function () {
30        //テキストエリアに表示する
31        text.value = reader.result;
32      }
33});
34</script>
35</html>

m.ts10806

2021/11/30 10:21

現状だと「可能です」だけの回答になります。＞ファイルの読み込み方法を調べました。何をどう調べその結果で何を試し、結果どうだったのかを書かれないことには何も調べてないのと同じです（見ている人は全て赤の他人です）

cfds

2021/11/30 11:49

申し訳ございません。その部分について追記させていただきました。

行動規範の内容に同意します

回答2件

複数のtextareaに分けて

セパレータでsplitとしてそれぞれ当て込めば良いと思います。
（セパレータが何か、何番目をどれに当てるかは作る人が決める仕様なので決めてください）

投稿2021/11/30 11:51

m.ts10806

総合スコア80861

cfds

2021/12/02 06:05

ご回答いただき、ありがとうございます。 splitというものがあるんですね！詳しく調べてみます。

行動規範の内容に同意します

ベストアンサー

仕様がよくわかりませんが

値が入力されたtextファイルを読み込み

任意にtype="file"でローカルのファイルを手動で指定することで
ファイルの内容から入力要素を入れ込むことはできます。
ローカルのファイルを自動で取り込むことはできません

sample

ファイルをドロップして読んでinputに表示する方法が

javascript
1<style>
2.droppable{
3border:1px solid;
4  position:relative;
5height:200px;
6}
7.droparea{
8position:absolute;
9top:0;
10width:100%;
11height:100%;;
12opacity:0;
13  background-Color:lime;
14}
15</style>
16<script>
17window.addEventListener('DOMContentLoaded', ()=>{
18  document.querySelector('#myfile').addEventListener('drop',(e)=>{
19    const file=e.dataTransfer.files[0];
20    const fr = new FileReader();
21    fr.onload = function(e) {
22      const txts=e.target.result.split(/[\r\n]+/);
23      document.querySelectorAll('[type=text]').forEach((x,y)=>{
24        x.value=txts[y];
25      });
26    };
27    fr.readAsText(file);
28  });
29});
30</script>
31<div class="droppable">
32<div>ドロップして</div>
33<input type="file" id="myfile" class="droparea" >
34</div>
35<input type="text"><br>
36<input type="text"><br>
37<input type="text"><br>
38<input type="text"><br>
39<input type="text"><br>