jQuery：觀察nodevalue變化

Question

我想監視用contenteditable編輯的元素的nodeValue變化。基本上，我想在nodevalue的變化上運行一個函數。

我發現這個職位： http://james.padolsey.com/javascript/monitoring-dom-properties/

這似乎已經爲我想要的插件。

這裏的手錶插件：

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

舉個例子，我可以看一個輸入的值是這樣的：

$('#input').watch('value', function(propName, oldVal, newVal){ 
    $("#text").text(newVal); 
    }); 

但不是CONTENTEDITABLE的的nodeValue（其文本內容）：

$('#ce').watch('nodeValue', function(propName, oldVal, newVal){ 
    $("#text").text(newVal); 
    }); 

下面是現場示例：

http://jsbin.com/iconi/edit

任何人都知道如何使watch方法適用於nodevalue。謝謝！

Answer 1

這難道不簡單嗎？

$('#ce') 
    .bind('change keyup', 
     function() { 
      $('#text') 
      .text($(this).text()); 
     } 
    ); 

至於輸入：

$('#input') 
    .bind('change keyup', 
     function() { 
      $('#text') 
      .text($(this).val()); 
     } 
    );