evento onChange con contenteditable

Question

código como:

...text <span contenteditable="true" onChange="someFunction()">blah blah</span> text... 

El evento onChange no funciona. (al menos en FireFox)
No quiero usar etiquetas textarea/input, porque debe estar disponible para cambiar solo palabras particulares en el texto, y debe mostrarse en línea (no en bloque).

¿Hay alguna manera de hacerlo?

Answer 1

La función que escribí:
Una llamada de esta función corrige todos los elementos de ContentEditable en la página.

function fix_onChange_editable_elements() 
{ 
    var tags = document.querySelectorAll('[contenteditable=true][onChange]');//(requires FF 3.1+, Safari 3.1+, IE8+) 
    for (var i=tags.length-1; i>=0; i--) if (typeof(tags[i].onblur)!='function') 
    { 
    tags[i].onfocus = function() 
    { 
     this.data_orig=this.innerHTML; 
    }; 
    tags[i].onblur = function() 
    { 
     if (this.innerHTML != this.data_orig) 
     this.onchange(); 
     delete this.data_orig; 
    }; 
    } 
} 

Answer 2

No realmente. Los últimos navegadores WebKit admiten el evento HTML5 input en elementos contenteditable, que es ideal, pero no es compatible con otros navegadores (ACTUALIZACIÓN 31 de diciembre de 2012: Firefox admite esto a partir de la versión 14). De lo contrario, puede cumplir con DOM mutation eventsDOMNodeInserted, DOMNodeRemoved y DOMCharacterDataModified, pero estos tienen dos desventajas: en primer lugar, no son compatibles con IE < 9 o cualquier versión de Opera para elementos contenteditable, y en segundo lugar, una nueva especificación con eventos de reemplazo está en proceso, lo que significa que es probable que sean reemplazados en futuros navegadores.

ejemplo vivo: http://jsfiddle.net/MBags/

O usted podría ir nivel inferior y manejar llave, ratón y eventos del portapapeles (cut y paste), que funciona en todos los navegadores, pero eso significará que tendrá que comprobar si el el contenido editable ha cambiado cada vez que se desencadena un evento de este tipo, que se ralentiza y daña la experiencia del usuario para grandes cantidades de contenido.

Answer 3

Como los elementos sin entrada no tienen eventos tradicionales similares a la entrada, tiene que ordenar algo juntos. Para ello:

var editable = document.querySelectorAll('div[contentEditable]'); 

for (var i=0, len = editable.length; i<len; i++){ 
    editable[i].setAttribute('data-orig',editable[i].innerHTML); 

    editable[i].onblur = function(){ 
     if (this.innerHTML == this.getAttribute('data-orig')) { 
      // no change 
     } 
     else { 
      // change has happened, store new value 
      this.setAttribute('data-orig',this.innerHTML); 
     } 
    }; 
} 

JS Fiddle demo.

Aunque como se señala en Tim Down, esto no debería ser necesario por mucho más tiempo, con la obvia excepción de admitir navegadores más antiguos.

Answer 4

Creé un plugin de jQuery para hacer esto.

(function ($) { 
    $.fn.wysiwygEvt = function() { 
     return this.each(function() { 
      var $this = $(this); 
      var htmlOld = $this.html(); 
      $this.bind('blur keyup paste copy cut mouseup', function() { 
       var htmlNew = $this.html(); 
       if (htmlOld !== htmlNew) { 
        $this.trigger('change'); 
        htmlOld = htmlNew; 
       } 
      }) 
     }) 
    } 
})(jQuery); 

Usted puede simplemente llamar $('.wysiwyg').wysiwygEvt();

También puede eliminar/añadir eventos si desea