Menu
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> Thanks
856
Answer: Use the HTML5 contenteditable Attribute You can set the HTML5 contenteditable attribute with the value true (i.e. contentEditable="true" ) to make an element editable in HTML, such as <div> or <p> element.
To edit the content in HTML, we will use contenteditable attribute. The contenteditable is used to specify whether the element's content is editable by the user or not. This attribute has two values. true: If the value of the contenteditable attribute is set to true then the element is editable.
Use the textContent property to change the text of a div element, e.g. div. textContent = 'Replacement text' . The textContent property will set the text of the div to the provided string, replacing any of the existing content.
Let's work through it.
You can't make a div editable. There's no such thing as an editable div, at least for now. So the problem is finding out what to use for editing instead. A textarea works perfectly. So the idea is to somehow get a textarea where the div currently sits.
The question is how and from where do we get the textarea. There are various ways, but one of them is to dynamically create a textarea on the fly:
var editableText = $("<textarea />"); and replace it with the div:
$("#myDiv").replaceWith(editableText); The textarea is in place now. But it is empty and we have just replaced the div and lost everything. So we need to preserve the text of the div somehow. 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 populate the textarea and safely replace the div with the textarea. And set the focus inside the textarea as the user might want to start editing. Combining all the work upto 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's text editableText.val(divHtml); // replace the div with the textarea $("#myDiv").replaceWith(editableText); // editableText.focus(); It's functional but nothing happens when a user clicks a div because we didn't setup any events. Let's wire up the events. When the user clicks 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'd want a way to get our div back when a user clicks out or leaves the textarea. There is a blur event for form controls that is triggered when a user leaves the control. That can be used to detect when a user leaves the textarea, and replace back the div. We do the exact reverse this time. Preserve the value of textarea, create a dynamic div, set it's html, and replace out the textarea.
$(editableText).blur(function() { // Preserve the value of textarea var html = $(this).val(); // create a dynamic div var viewableText = $("<div>"); // set it's html viewableText.html(html); // replace out the textarea $(this).replaceWith(viewableText); }); Everything is great, except that this new div will no longer convert into a textarea on click. This is a newly created div, and we'll have to setup the click event again. We already have the entire 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'll need to do the same for the textarea. Let's convert that into 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); } Wiring up everything together, we have 2 functions, divClicked, editableTextBlurred and the line below triggers everything:
$("div").click(divClicked); Checkout this code at http://jsfiddle.net/GeJkU/. This is not the best way of writing editable divs by any means, but just one way to start and approach the solution step by step. Honestly I have learnt just as much as you in writing this long piece. Signing off, adios!
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
