将文本文件加载到 html 中的正确文本框中答案

【问题标题】：loading a text file into the correct textbox in html将文本文件加载到 html 中的正确文本框中
【发布时间】：2022-10-17 23:43:32
【问题描述】：

我一直在玩这段代码，但还没有弄清楚如何去做。该代码是 javascript 并将单个文本框值保存到文本文件中，以后可以将其加载回文本框。问题是我试图让它与网站上的多个文本框一起工作，但它要么只适用于一个文本框，要么无法分离文本文件中的信息，而只是将所有框中的所有相同值放入每个文本中盒子。

关于我应该怎么做才能使用单独的文本框并将正确的信息加载到正确的框中的任何想法？谢谢

    <html>
      <body>

      <table>
      <tr><td>Text to Save:</td></tr>
      <tr>
        <td colspan="3">
            <textarea id="inputTextToSave" cols="80" rows="25"> 
            </textarea>
         </td>
    </tr>
    <tr>
        <td>Filename to Save As:</td>
        <td><input id="inputFileNameToSaveAs"></input> 
   </td>
        <td><button onclick="saveTextAsFile()">Save Text to File</button></td>
    </tr>
    <tr>
        <td>Select a File to Load:</td>
        <td><input type="file" id="fileToLoad"></td>
        <td><button onclick="loadFileAsText()">Load Selected File</button><td>
    </tr>
    </table>

    <script type="text/javascript">

    function saveTextAsFile()
    {
       var textToSave = 
       document.getElementById("inputTextToSave").value;
       var textToSaveAsBlob = new Blob([textToSave], 
       {type:"text/plain"});
       var textToSaveAsURL = 
       window.URL.createObjectURL(textToSaveAsBlob);
       var fileNameToSaveAs =      document.getElementById("inputFileNameToSaveAs").value;

       var downloadLink = document.createElement("a");
       downloadLink.download = fileNameToSaveAs;
       downloadLink.innerHTML = "Download File";
       downloadLink.href = textToSaveAsURL;
       downloadLink.onclick = destroyClickedElement;
       downloadLink.style.display = "none";
       document.body.appendChild(downloadLink);

       downloadLink.click();
    }

    function destroyClickedElement(event)
    {
       document.body.removeChild(event.target);
    }

    function loadFileAsText()
    {
       var fileToLoad = 
          document.getElementById("fileToLoad").files[0];

       var fileReader = new FileReader();
       fileReader.onload = function(fileLoadedEvent) 
       {
           var textFromFileLoaded = 
             fileLoadedEvent.target.result;
         document.getElementById("inputTextToSave").value = textFromFileLoaded;
       };
       fileReader.readAsText(fileToLoad, "UTF-8");
    }

    </script>
    </body>
    </html>

【问题讨论】：

您的代码有效。我认为如果您发布失败的代码可能会有用。
是的，该代码仅适用于一个文本字段。我试图弄清楚如何使它与多个文本框一起工作，但我不知道如何使它以一种可以分隔文件中的所有值并放置它们的方式保存到 blob 文件中回到正确的文本框中。如果我尝试使用多个 document.getElementById("inputTextToSave").value;并将其全部保存到一个文件中，我无法弄清楚如何将信息分开并在上传时将其放回正确的框中

标签： javascript html textbox save

【解决方案1】：

我不确定这是否是您正在寻找的，但这里有：

<table>
    <tr><td>Text to Save:</td></tr>
    <tr>
        <td colspan="3">
            <textarea class="inputTextToSave" cols="80" rows="5"></textarea>
            <textarea class="inputTextToSave" cols="80" rows="5"></textarea>
        </td>
    </tr>
    <tr>
        <td>Filename to Save As:</td>
        <td><input id="inputFileNameToSaveAs"/></td>
        <td><button onclick="saveTextAsFile()">Save Text to File</button></td>
    </tr>
    <tr>
        <td>Select a File to Load:</td>
        <td><input type="file" id="fileToLoad"></td>
        <td><button onclick="loadFileAsText()">Load Selected File</button>
        <td>
    </tr>
</table>

在这里，我添加了第二个 TextArea 并更改了类的 id 以按类名选择所有 TextArea。

var delim = "[^~^]"

function getAllTextBoxesText() {
    var allText = "";
    var textBoxes = document.getElementsByClassName("inputTextToSave");
    for (var i = 0; i < textBoxes.length; i++) {
        allText += textBoxes[i].value + delim;
    }

    return allText;
}

function splitTextBox(allText) {
    var textBoxesTexts = allText.split(delim);

    var textBoxes = document.getElementsByClassName("inputTextToSave");
    for (var i = 0; i < textBoxes.length; i++) {
        if (i >= textBoxesTexts.length)
            break;

        textBoxes[i].value = textBoxesTexts[i];
    }
}

function saveTextAsFile() {
    var textToSave = getAllTextBoxesText();
    var textToSaveAsBlob = new Blob([textToSave], { type: "text/plain" });
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
}

function destroyClickedElement(event) {
    document.body.removeChild(event.target);
}

function loadFileAsText() {
    var fileToLoad = document.getElementById("fileToLoad").files[0];

    var fileReader = new FileReader();
    fileReader.onload = function (fileLoadedEvent) {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        splitTextBox(textFromFileLoaded);
    };
    fileReader.readAsText(fileToLoad, "UTF-8");
}

这个想法是将所有 textarea 的文本连接到一个字符串中，然后将它们拆分。为此，我使用了分隔符。您必须使用一些您知道不会出现在文本中的分隔符。通常，像 ¶（十六进制的 0xB6）这样的不可打印字符可能很有用。

有了这个想法，我使用 getAllTextBoxesText 函数将所有 textarea 的文本连接到一个字符串中。这是使用原始保存功能保存的文本。

对于加载部分，我们也这样做：splitTextBox 函数只使用分隔符分割文本，并将每个部分设置在一个文本区域中。在获取加载的文本内容后，我在您的 loadFileAsText 中使用此函数。

你可以在这里测试：https://jsfiddle.net/pyv5djbe/

【讨论】：