【问题标题】:How to persist text after a form submit (how to not delete itself after submit?)如何在表单提交后保留文本(如何在提交后不删除自身?)
【发布时间】:2017-03-08 20:36:18
【问题描述】:

如何在文本框中保存和重新填充文本?每次点击保存,文本输入框中的旧文本都会被移除,不应该被移除。

我想做一个在线编辑器,我需要能够保存当前文本,而不需要在保存后从文本区域框中删除文本。

var types = [
      {"extension": ".html", "name": "HTML"},
      {"extension": ".txt", "name": "Plain Text"},
      {"extension": ".js", "name": "Javascript"},
      {"extension": ".css", "name": "CSS"},
    ];
types.forEach(function(type) {
  $opt = $("<option>").attr("value", type.extension).text(type.name)
  $("#saveas").append($opt)
});

function SaveAsType() {
  console.log($("#saveas").val());

  {
    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 + "" + $("#saveas").val();

    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);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="inputTextToSave" name="inputTextToSave" rows="10" cols="70" placeholder="Type your text here:"></textarea>
    <br>
    <textarea id="inputFileNameToSaveAs" rows="1" cols="70" placeholder=" Filename Save As " style="resize:none;"></textarea>
    <br>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="jquery.min.js"></script>
    Save as
    <select id="saveas">
      <option value="">Defoult ´´ TXT ´´ file or type your own file type</option>
      <option value=".html">´´ HTML ´´ file</option>
      <option value=".js">´´ JS ´´ file</option>
      <option value=".css">´´ CSS ´´ file</option>
      <option value=".txt">´´ TXT ´´ file</option>
    </select><button onclick="SaveAsType();">Save</button>

【问题讨论】:

  • cookie ?? HTML5 本地存储 ??
  • 感谢您缩短我的回答。我想我的英语在谈论代码时不是那么好。谢谢...@SWPhantom
  • 谢谢,有趣的是,经过大量尝试寻找答案后,我自己找到了答案。但我会将问题保留在网上,供那些可能有相同问题或问题但不知道如何解决的人使用。愚蠢的解决方案是多么简单,以及我是如何看透它的。 @br3t

标签: javascript jquery html save save-as


【解决方案1】:

这个问题在页面上停留了较长时间后,我自己找到了答案。这实际上是一个非常简单的解决方案。

我刚刚改了:

<button onclick="SaveAsType();">Save</button>

进入

<input type="button" onClick="SaveAsType();" value=" Save ">

WALLAH,现在文本在保存到文本区域后会保留而不被删除。

注意:我会将问题保留在网上,以供可能有相同问题或问题但不知道如何解决的人使用。愚蠢的解决方案是多么简单,而我是如何看待它的。

【讨论】:

    猜你喜欢
    • 2021-01-13
    • 1970-01-01
    • 1970-01-01
    • 2011-01-18
    • 1970-01-01
    • 2017-09-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多