如何在表单提交后保留文本(如何在提交后不删除自身?)

时间:2017-03-08 20:36:19

标签: javascript jquery html save save-as

如何在文本框中保存和重新填充文本?每次单击“保存”时,旧文本都会从文本输入框中删除,不应删除。

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



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);
}
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

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

我刚改变了:

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

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

而WALLAH,现在文本在保存在textarea中后保留,而不删除它。

注意:我会在网上为那些可能有同样问题或疑问并且不知道如何解决问题的人保留问题。愚蠢的解决方案是多么简单,以及我如何看待它。