Estoy escribiendo un complemento jQuery para simular un div editable.
Aquí está mi código:Controlar el evento de cambio de texto de entrada
(function($){
$.fn.editable = function(){
return this.each(function(){
var $this = $(this).hide();
var div = $('<div>'+$this.val()+'</div>').show().insertAfter($this).data('input',$this);
$this.data('div',div);
div.dblclick(function(){
$(this).hide();
$(this).data('input').val($(this).text()).show();
});
$this.blur(function(){
$(this).hide();
$(this).data('div').html($(this).val()).show();
});
$this.change(function(){
$(this).data('div').html($(this).val());
});
});
};
})(jQuery);
Hasta ahora, this works bastante bien ..
Ahora, lo que yo quiero hacer, y no tienen ni idea de cómo, es hacer el cambio de texto si el div oculto cambios en el valor de entrada.
Medios, si lo hago $('#editable').val('new text')
el div debe cambiar ..
No puedo desencadenar el cambio caso de forma manual, ya que el cambio de entrada se producirá dentro de otros plugins que no controlo ..
¿Puede ampliar cómo espera '$ ('# editable'). Val()' para trabajar? ¿Por qué 'val()' en oposición a 'html()'? ¿Y qué elemento tiene la id editable? –
@palintropos actualizó mi jsFiddle – skafandri
Como un aparte, ¿has mirado en 'contenteEditable'? Creo que es completamente compatible con –