Controlar el evento de cambio de texto de entrada

Question

Estoy escribiendo un complemento jQuery para simular un div editable.
Aquí está mi código:

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

Answer 1

Eche un vistazo a esto, en su complemento puede extender la función val de esta manera para que el evento de cambio se active cuando se cambie el valor utilizando la función val.

How to extend the val method so that the change event is triggered when val is called?

Answer 2

Sugiero que haga sus métodos de apoyo plugin de jQuery como se describe en Plugins/Authoring - Namespacing:

, entonces tendrá algo como esto:

(function($){ 

    var methods = { 

    init : function(options) { 
     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();     
     }); 
    }, 

    value : function(str) { 
     return this.each(function(){ 
     $(this).val(str); 
     $(this).data('div').html($(this).val()); 
     }); 
    } 
    }; 

    $.fn.editable = function(method) { 

    // Method calling logic 
    if (methods[method]) { 
     return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery.editable'); 
    }  

    }; 

})(jQuery); 

Entonces lo va a usar como esto:

$('#editable').editable('new value that will sync the related div'); 
// instead of `$('#editable').value('...')` 

Te recomiendo que lea el artículo del Plugins/Authoring - Namespacing 's en jQuery.

---

ACTUALIZACIÓN Dado que he cometido un error entender la pregunta, vine con las siguientes soluciones propuestas. No es la mejor manera de hacerlo.

Le recomiendo que revise su diseño de complemento, ya que no es accesible en mi opinión personal.

Pero, ya que no puedo ver todo el escenario, el siguiente fragmento de código hará el truco

(function() { 

    // Store the original jQuery.val() 
    var $$val = $.fn.val; 

    // Add a hook. 
    $.fn.val = function(s) { 

     // Call your plugin change event. 
     $(this).editable('change'); 

     // Delegate to the original jQuery.val function. 
     return $$val.apply(this, Array.prototype.slice.call(arguments)); 
    }; 

    // Your plugin stuff... 
}) 

HTH

Answer 3

Al hacer doble clic en el <div> para editar el <input>, está sobreescribiendo el valor de la entrada con esta línea:

$(this).data('input').val($(this).text()).show(); 

Si el evento .change() no se ha activado (como usted indica), significa que está sobrescribiendo los cambios realizados por el complemento externo con el contenido "anterior" de su div. Elimine .val() para evitar ese problema.

$(this).data('input').show(); 

Como alternativa a confiar en el plugin activación externa .change(), se puede comprobar el valor mediante el sondeo. Si bien esto no se recomienda si hay eventos disponibles, no tendrá un gran impacto si configura el intervalo de sondeo de manera razonable. Dado que se trata de seres humanos que ingresan datos de una forma, supongo que no es necesario sondear con más frecuencia que cada 250 milisegundos.

Consulte $("#editable").changePolling(); para ver un contenedor que comprueba el valor actual y desencadena .change() si ha cambiado. Consulte the forked jsfiddle para obtener un ejemplo basado en su código.