2017-03-08 53 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的節約,而無需其刪除後。

注意:我會在線爲那些可能有相同的問題或問題,並不知道如何解決它的人在線提問。很愚蠢的解決方案是多麼簡單,以及我如何看待它。

相關問題