jquery unwrap Interno

Estoy tratando de crear una edición en línea simple para un cuadro div. Cuando hago clic en el div, meto wrapInner con la etiqueta textarea. Eso lo hace editable. Pero, ¿cómo puedo desenvolver la etiqueta textarea cuando hago clic fuera del campo textarea? Debajo está lo que tengo que no funciona. También debería usar focusout, mouseout, mouseleave o cualquiera de ellos.jquery unwrap Interno

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

Fuente

2011-01-13 Hussein

Algunas cosas que probablemente deba hacer de manera diferente.

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

Enlace el dblclick directamente a #test
En el controlador de dblclick.find() la nueva textarea, y .focus() en él
Coloque un manejador .delegate() en #test en lugar de utilizar .live()
Uso blur vez de mouseleave
En el controlador blur, establezca el .text() de #test en el value del textarea. (Esto es importante con el fin de recoger las modificaciones que se hicieron.)

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

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

He aquí un ejemplo que permite HTML a ser escrito en el área de texto.

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

Fuente

2011-01-13 02:43:01 user113716

Eso funciona, pero cuando ya estás dentro del área de texto y haces clic otra vez, el texto desaparece. Está creando otra instancia en textarea con cada clic doble. – Hussein

Después de probar esto, no hace el trabajo de desenvolver. realmente está eliminando cada etiqueta hija dentro y no solo textarea. Si tenemos una etiqueta span dentro de una palabra, se eliminará la etiqueta span. – Hussein

@alex: ¿estás hablando de etiquetas que se escribieron en el área de texto? [Aquí hay un ejemplo actualizado.] (Http: // jsfiddle.net/drQkp/2 /) Permite HTML, y no utiliza ningún tipo de método 'wrap'. – user113716

Unwrap no existe por lo que yo sé. Una vez que tenga $('#test > textarea'), asigne su contenido a su padre.

Sería mucho menos propenso a errores si comenzaste con el texto "testing" dentro de un <span> o algo así, luego copia los contenidos del span a un área de texto, y luego otra vez.

Fuente

2011-01-13 02:11:45

Separar existe http://api.jquery.com/unwrap/ – Hussein

@alex Ups! Sin embargo, funciona en elementos DOM, no en su contenido de valor. –

$("#test > textarea").unwrap() está desenvolver el área de texto, por lo tanto, eliminar el div #test, en lugar de eliminar el área de texto. Por el contrario desea:

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

Como se puede ver en esta demo, la mouseleave activará inmediatamente sobre cualquier movimiento del ratón después de la wrapInner, por lo que probablemente desea enlazar el mouseleave al área de texto dentro del manejador de DoubleClick.

Fuente

2011-01-13 02:26:32

Respuesta

Cuestiones relacionadas