Shelby Shelby - 1 year ago 98
HTML Question

Make text box editable and save it

I am wanting to make a text box on a webpage that anyone can edit and also save. So when they refresh the page their text is still there.

Here is the simple code I have so far. I can edit it just haven't figured out how to save it.

<div id="example-one" contenteditable="true">
<style scoped>
#example-one { margin-bottom: 10px; }
[contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }
[contenteditable="true"]:hover { outline: 2px dashed #0090D2; }
<p>Save Text</p>

Answer Source

Here's a minimal example using localStorage:

<div id="example-one" contenteditable="true">

<p id="save">Save Text</p>

document.getElementById("save").addEventListener('click', function(el) {
    localStorage.setItem("text", document.getElementById('example-one').innerHTML);

window.onload = function() {
    var text = localStorage.getItem("text");
    document.getElementById('example-one').innerHTML = text;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download