Make Divs Editable For User With jQuery

Introduction

This short article provides a handy method to make a generic DOM element editable, giving the final user the possibility of changing the internal HTML code of the object itself, to alter its functionalities and layout. This method poses the basics for further developments, towards the building of a live HTML editor, if our wish is to allow the users of a website to be able to modify some of the predefined elements they find in our DOM.

A sample HTML code

Let's assume we have a simple HTML page, like the following.

<div class="wrapper">  
    <div id="editable">Double Click On Me!</div>  
</div>

Here we have a wrapper div that we could say represents the external structure of our page and an internal div, that will contain our page code. In our case, we have a div that contains simply the phrase "Double Click on Me!".

The style that you'll see here, with Red borders and different width/height, is an effect made by CSS that you could further analyze at the link listed below for source code. So, what we want to do is to make the div editable, when our user double-clicks it. Though it's possible in plain JavaScript, we'll see how to do that using jQuery, since jQuery can be a nice time saver.

How to make editable a DOM element?

We said we want to make editable our div on double-click event, so considering our div's ID is "editable", we could begin managing the JQuery's dblclick event, like this.

$('#editable').dblclick(function () {  
    var $text = $(this).html();  
    var $edBox = '<textarea id="editBox">' + $text + '</textarea>';  
    $(this).html($edBox);  
});

Let's see briefly what we've done here. When a user double-clicks our div, the preceding code will, respectively.

• save in a variable named $text the current div's contents.
• create a variable in which we'll store a textarea (with ID equal to "editBox") that will contain the previously read content.
• apply to the HTML code of our div the newly created element, in other words the textarea with the div's content.

We'll test now if everything works. After double-clicking, our div will produce the following changes in our DOM.

As you can see, when double-clicked, our div will host a textarea containing the div's contents, for the user to modify. But we now need a method to consolidate those changes. When the user has finished editing the textarea, how can he return to the div the updates that have just been made? I've choosen to use a keypress for this. When a user has finished editing, he must press the Enter key to exit the textarea, returning to the div. Let's see how.

$('#editable').on("keypress", function (event) {  
    if (event.which == 13) {  
        var $text = $("#editBox").val();  
        $(this).html($text);  
    }  
});

A second handler to the keypress event of our div will control if an user has pressed the Enter key (event.which == 13). If he's done that, the routine.

• reads in a variable named $text the current value of the textarea.
• writes the just read value in the div's HTML code.

So, the natural flow regarding the usability of that script is.

Sample code

You could try a live version of the code on JSFiddle, using the following link: http://jsfiddle.net/5nahpzm6/3/

I hope that could be useful in your projects.

Happy coding!