實時監測contenteditable(可編輯文檔)的內容發生改變


如果是文本框用onchange,oninput,onpropertychange都可以實時監控值發生變化,但是div設置了屬性contenteditable(可編輯文檔)就不管用了。

最簡單的方法用oninput事件,可惜ie下支持度不好

addEvent(doc,'input',function(){
    //do something...
});

那么自己實現一個:

var oldValue = context.getSource(), newValue;

['blur','keyup','mouseup'].forEach(function(type){
    addEvent(doc,type,function(){
             newValue = context.getSource();
            if(oldValue != newValue){
                //do something...
                oldValue = newValue;
            }
        });
});

JQ實現:

(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')
    }
   })
  })
 }
})(jQuery);


//調用:$('.wysiwyg').wysiwygEvt();

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM