Best IT Recipes

How to make a div element editable (e.g. text box when I click it)?

This is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="viewport" content="width=device-width, user-scalable=no"> </head> <body> <style type="text/css" media="screen"> </style> <!--<div id="map_canvas" style="width: 500px; height: 300px;background:blue;"></div>--> <div class=b style="width: 200px; height: 200px;background:pink;position:absolute;left:500px;top:100px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> </script> </body> </html>

thank

+49
javascript jquery
Mar 14 '10 at 8:07
source share
6 answers

Let it work through him.

You cannot make a div editable. There is no such thing as an editable div, at least not yet. Therefore, the problem is to figure out what to use for editing. The text box works great. Therefore, the idea is to somehow get the text box in which the div sits.

The question is how and where do we get the text box. There are different ways, but one of them is to dynamically create a text field on the fly:

 var editableText = $("<textarea />");

and replace it with a div:

 $("#myDiv").replaceWith(editableText);

The text box is now in place. But it is empty, and we just replaced the div and lost everything. Therefore, we need to somehow save the div text. One way is to copy the text / html inside the div before replacing it:

 var divHtml = $("#myDiv").html(); // or text(), whatever suits.

Once we have the html from the div, we can fill the text box and safely replace the div with the text box. And set the focus inside the text box, as the user may want to start editing. Combining all the work up to this point, we get:

 // save the html within the div var divHtml = $("#myDiv").html(); // create a dynamic textarea var editableText = $("<textarea />"); // fill the textarea with the div text editableText.val(divHtml); // replace the div with the textarea $("#myDiv").replaceWith(editableText); // editableText.focus();

It functions, but nothing happens when the user clicks on the div, because we did not configure any events. Let me hook up the events. When the user clicks on any div $("div").click(..) , we create a click handler and do all of the above.

 $("div").click(function() { var divHtml = $(this).html(); // notice "this" instead of a specific #myDiv var editableText = $("<textarea />"); editableText.val(divHtml); $(this).replaceWith(editableText); editableText.focus(); });

This is good, but we need a way to return our div when the user clicks or leaves the text field. For form elements, there is a blur event that fires when the user leaves the control. This can be used to detect when the user leaves the text box and replaces the div. This time we are making an exact turn. Save the textarea value, create a dynamic div, set it to html and replace the text box.

 $(editableText).blur(function() { // Preserve the value of textarea var html = $(this).val(); // create a dynamic div var viewableText = $("<div>"); // set it html viewableText.html(html); // replace out the textarea $(this).replaceWith(viewableText); });

Everything is fine, except that this new div will no longer convert to the text area when clicked. This is a newly created div, and we will have to configure the click event again. We already have all the code, but better than repeating it twice, it's better to make a function out of it.

 function divClicked() { var divHtml = $(this).html(); var editableText = $("<textarea />"); editableText.val(divHtml); $(this).replaceWith(editableText); editableText.focus(); // setup the blur event for this new textarea editableText.blur(editableTextBlurred); }

Since the whole operation is two-way reversible, we will need to do the same for the text field. Let me convert this to a function too.

 function editableTextBlurred() { var html = $(this).val(); var viewableText = $("<div>"); viewableText.html(html); $(this).replaceWith(viewableText); // setup the click event for this new div $(viewableText).click(divClicked); }


Putting it all together, we have 2 functions, divClicked , editableTextBlurred and the line below starts everything:

 $("div").click(divClicked);

Checkout this code at http://jsfiddle.net/GeJkU/ . This is not the best way to write editable sections by any means, but just one way to start and approach the solution step by step. Honestly, I found out just like you did by writing this long play. Depart, Adio!

+123
Mar 14 '10 at 9:13
source share

For a div you can use this HTML attribute to make it editable:

 <div contenteditable="true">Anything inside this div will be editable!</div>

Further information here: http://html5demos.com/contenteditable

Hope this helps.

+67
Nov 14 '10 at 21:52
source share

Use the attributes contenteditable="true" for division.

+7
Sep 27 '10 at 1:27
source share

Based on Anurag's answer, I wrote a small jquery plugin:

https://github.com/zevero/jquery-html-editable

which allows you to edit all elements of div.myDiv:

 $('body').html_editable('div.myDiv');
+4
Oct 08 '15 at 17:41
source share

For those looking for the on() version, this is based on Anurag's answer.

If for some reason you want to remove the click event from editable text input (for example, to view editable and non-editable versions of content), you can subsequently apply $(document).off("click", ".editable_text"); .

 $(document).on("click", ".editable_text", function() { var original_text = $(this).text(); var new_input = $("<input class=\"text_editor\"/>"); new_input.val(original_text); $(this).replaceWith(new_input); new_input.focus(); }); $(document).on("blur", ".text_editor", function() { var new_input = $(this).val(); var updated_text = $("<span class=\"editable_text\">"); updated_text.text(new_input); $(this).replaceWith(updated_text); }); 
 .text_editor { border: none; background: #ddd; color: #000; font-size: 14px; font-family: arial; width: 200px; cursor: text; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><span class="editable_text">Here is my original text.</span> </p>
+4
Jul 08 '16 at 14:12
source share

contenteditable has some serious flaws. The worst thing, in my opinion, is cross-browser incompatibility when using Enter. See article description for a description. In Firefox, pressing Enter to return a carriage creates a new paragraph, effectively doubling the spacing between each line that is not long enough to wrap. Very ugly.

+2
Oct 19 '12 at 13:55
source share


More articles:


All Articles