editable HTML "textarea" that displays URLs

by jmjpro

HTML

<form>
    <label for="textarea-real">Real Textarea</label>
    <textarea id="textarea-real" cols="50">Here is some plain text and here is a &lt;a href="URL" title="Description"&gt;link&lt;/a&gt;</textarea>
    <p/>
<label for="textarea-faux">Faux Textarea</label>
    <div id="textarea-faux">Here is some plain text and here is a <a href="www.groopex.com" title="Description">link</a>.
    </div>
    <button id="button-edit">Edit</button>
    <button id="button-done">Done</button>
</form>

CSS

#textarea-faux {
    resize: both;
    height: 50px;
    width: 400px;
    border: 1px solid gray;
}

JavaScript

$("#button-edit").click( function(evt) {
    $("#textarea-faux")[0].contentEditable = 'true';
    $("#textarea-faux").text($("#textarea-faux").html()).html();
    evt.stopPropagation();
	evt.preventDefault();
});

$("#button-done").click( function(evt) {
    $("#textarea-faux")[0].contentEditable = 'false';
    $("#textarea-faux").html($("#textarea-faux").text()).text();
    evt.stopPropagation();
	evt.preventDefault();
});