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

Question

我一直在玩这段代码，但还没有弄清楚如何去做。代码是 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>

Answer 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，并将 class 的 id 更改为 select 所有 TextArea by className.

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 函数将所有文本区域的文本连接到一个字符串中。这是使用原始保存功能保存的文本。

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

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

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

loading a text file into the correct textbox in html

html

javascript

textbox

save

script