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
Best Answer
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:
and replace it with the div:
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:
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:
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.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.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.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.
Wiring up everything together, we have 2 functions,
divClicked
,editableTextBlurred
and the line below triggers everything: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!