当前位置： 文江博客话题详情

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

发布于 2025-01-20 18:25:33 字数 2494 浏览 2 评论 0原文

我一直在玩这个代码，尚未弄清楚如何做。该代码为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>
原文

I have been playing with this code and have yet to figure out how to do it. The code is javascript and will save a single textbox value into a text file that can later be loaded back into the textbox. The problem is that I am trying to make it work with multiple text boxes on a website but it either just works on one or it can not separate the information in the text file and just put all the same values from all the boxes into each text box.

Any idea on what I should do to make this work with seperate textboxes and load the correct info into the correct box? thanks

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

怎樣才叫好 2025-01-27 18:25:33

我不确定这是否是您要找的，但这里是：

<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 以按 className 选择所有 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");
}

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

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

对于加载部分，我们执行相同的操作：splitTextBox 函数仅使用分隔符分割文本，并将每一部分设置在一个文本区域中。在获取加载的文本内容后，我在 loadFileAsText 中使用此函数。

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

I'm not sure if this is what you're looking for, but here goes:

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

Here I add a second TextArea and change id for class to select all 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");
}

The idea is join all textarea's texts in one string and later, split them. To do that, I use a delimiter. You must use some delimiter that you know won't appear in your text. Usually, a non printable character like ¶ (0xB6 in hexadecimal) may be useful.

With this idea, I use getAllTextBoxesText function to join all textarea's texts in a single string. This is the text to save with your original save function.

For the load part, we do the same: splitTextBox function only splits the text using the delimiter and set each part in one textarea. I use this function in your loadFileAsText, after get the loaded text content.

You can test here: https://jsfiddle.net/pyv5djbe/

回复 原文
~没有更多了~

关于作者

寂寞笑我太脆弱

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文