Jquery unwrap inner

Question

I am trying to create simple inline editing for a div field. When I dblclick on a div, I wrapInner with the textarea tag. This makes it editable. But how can I expand the textarea tag when I click the outsite textarea field. The following is what I have, which does not work. You should also use focus, mouse, mouse, or any of them.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <div id="test" style="width:300px; height:200px;"> testing </div> <script type="text/javascript"> $("#test").live({ dblclick: function() { $("#test").wrapInner("<textarea/>") }, mouseleave: function() { $("#test > textarea").unwrap() } }); </script> 

Answer 1

A few things you should probably do differently.

 $("#test").dblclick( function() { $(this).wrapInner("<textarea/>").find('textarea').focus(); }).delegate('textarea','blur',function() { $(this).parent().text( this.value ); }); 

• Bind dblclick directly to #test
• In the dblclick .find() handler, the new textarea and .focus() on it
• Put the .delegate() handler on #test instead of .live()
• Use blur instead of mouseleave
• In the blur handler, set .text() of #test to value textarea . (This is important in order to pick up the changes made.)

Example: http://jsfiddle.net/drQkp/1/

---

Example: http://jsfiddle.net/drQkp/2/

Here is an example that allows you to enter HTML in a text box.

 $("#test").dblclick(function() { $(this).html($("<textarea/>",{html:this.innerHTML})).find('textarea').focus(); }).delegate('textarea', 'blur', function() { $(this).parent().html(this.value); }); 

Answer 2

$("#test > textarea").unwrap() expands the text field, so deleting the div #test, not deleting the text field. Instead, you want:

 $("#test > textarea").contents().unwrap() 

As you can see from this demo , the mouse starts immediately with any mouse movement after wrapInner , so you probably want to snap the mouse to the text space inside the doubleclick handler.

Answer 3

The gap does not exist, as far as I know. When you have $('#test > textarea') , assign its contents to the parent.

It would be much less error prone if you started with the text “testing” inside the <span> or something else, then copy the contents of the range into the text box and then again.