实时监测contenteditable(可编辑文档)的内容发生改变

Posted codeing or artist ?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实时监测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();

 

以上是关于实时监测contenteditable(可编辑文档)的内容发生改变的主要内容,如果未能解决你的问题,请参考以下文章

区域可编辑contenteditable的问题总结

contenteditable="true"让div可编辑

div设置contenteditable="true",即可编辑,我想做一个按钮,点击它之后,焦点处就自动出现一个可编辑的

如何在contenteditable div中删除非contenteditable div

如何在具有 contentEditable 的元素上启用“可拖动”?

contenteditable属性