2011-01-13 7 views
7

Ich versuche, eine einfache Inline-Bearbeitung für eine Div-Box zu erstellen. Wenn ich auf das div klicke, wrapInner mit dem Textarea-Tag. Das macht es editierbar. Aber wie kann ich das Textarea-Tag auspacken, wenn ich außerhalb des Textfeldfelds klicke? Unten ist was ich habe was nicht funktioniert. Auch sollte ich focusout, mouseout, mouseleave oder irgendwelche von ihnen benutzen.jquery unwrap Inner

<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> 

Antwort

4

Ein paar Dinge, die Sie wahrscheinlich anders machen sollten.

$("#test").dblclick(function() { 
    $(this).wrapInner("<textarea/>").find('textarea').focus(); 
}).delegate('textarea','blur',function() { 
    $(this).parent().text(this.value); 
}); 
  • Bind die dblclick direkt an #test
  • Im dblclick Handler .find() die neue textarea und .focus() auf sie
  • Platz ein .delegate() Handler auf #test anstelle von .live()
  • Verwenden blur statt von mouseleave
  • Setzen Sie im blur Handler die .text() von #test auf die value der textarea. (Dies ist wichtig, um die Änderungen zu holen, die gemacht wurden.)

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


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

Hier ist ein Beispiel, die HTML erlaubt in das Textfeld eingegeben werden.

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

Das funktioniert, aber wenn Sie bereits im Textbereich sind und Sie erneut dbl klicken, verschwindet der Text. Es erstellt mit jedem Doppelklick eine weitere Instanz in textarea. – Hussein

+0

Nach dem Austesten erledigt es die Arbeit an der Auspackung nicht. Es entfernt wirklich jedes Kind-Tag innerhalb und nicht nur Textarea. Wenn wir ein Span-Tag um ein Wort gewickelt haben, wird das Span-Tag entfernt. – Hussein

+0

@alex: Sprichst du über Tags, die in das Textfeld eingegeben wurden? [Hier ist ein aktuelles Beispiel.] (Http: // jsfiddle.net/drQkp/2 /) Es erlaubt HTML und verwendet keine "wrap" Art von Methoden. – user113716

0

Auspacken existiert nicht, soweit ich weiß. Sobald Sie $('#test > textarea') haben, weisen Sie den Inhalt dem übergeordneten Element zu.

Es wäre viel weniger fehleranfällig, wenn Sie mit dem Text "testing" innerhalb einer <span> oder etwas beginnen würden, dann kopieren Sie den Inhalt der span in ein Textfeld, und dann wieder zurück.

+0

Abwickelwerkzeug existiert http://api.jquery.com/unwrap/ – Hussein

+0

@ Alex Hoppla! Es funktioniert jedoch bei DOM-Elementen und nicht bei deren Werteinhalten. –

11

$("#test > textarea").unwrap() entfaltet die TextArea und entfernt daher den div # -Test, anstatt die TextArea zu entfernen. Stattdessen wollen Sie:

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

Wie Sie von diesem demo sehen kann, wird die mouseleave auslösen sofort auf jeder Mausbewegung nach dem wrapInner, so dass Sie wahrscheinlich die mouseleave auf das Textfeld in der Doubleclick-Handler binden möchten.