2017-03-08 74 views
1

如何在文本框中保存和重新填充文本?每次点击保存,旧文本将从文本输入框中删除,不应删除。如何在表单提交后保留文本(提交后如何不删除自己)

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

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>

+0

饼干?? HTML5本地存储? –

+1

谢谢你缩短我的答案。我想我的英语在讨论代码时不太好。谢谢... @SWPhantom – SeekLoad

+1

谢谢你,很有趣,虽然经过很多试图找到答案,我发现它自己。但是我会在网上为那些可能有相同问题或问题并且不知道如何解决问题的人们提问。很愚蠢的解决方案是多么简单,以及我如何看待它。 @ br3t – SeekLoad

回答

1

有这个问题的时间较长的页面上后,我发现我自己自己的答案。这其实是非常简单的解决方案。

我只是改变了:

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

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

而且WALLAH,现在文本保存在textarea的节约,而无需其删除后。

注意:我会在线为那些可能有相同的问题或问题,并不知道如何解决它的人在线提问。很愚蠢的解决方案是多么简单,以及我如何看待它。