I want to watch for the nodeValue change of an element that's edited with contenteditable. Basically, I want to run a function on change of the nodevalue.
I found this post: http://james.padolsey.com/javascript/monitoring-dom-properties/
Which seems to have a plugin for what I want.
Here's the watch plugin:
jQuery.fn.watch = function( id, fn ) {
return this.each(function(){
var self = this;
var oldVal = self[id];
$(self).data(
'watch_timer',
setInterval(function(){
if (self[id] !== oldVal) {
fn.call(self, id, oldVal, self[id]);
oldVal = self[id];
}
}, 100)
);
});
return self;
};
As an example, I can watch an input's value like this:
$('#input').watch('value', function(propName, oldVal, newVal){
$("#text").text(newVal);
});
But not a contenteditable's nodevalue (its text content):
$('#ce').watch('nodeValue', function(propName, oldVal, newVal){
$("#text").text(newVal);
});
Here's the live example:
Anyone know how to adapt the watch method to work with nodevalue. Thanks!