实时监测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(可编辑文档)的内容发生改变的主要内容,如果未能解决你的问题,请参考以下文章
div设置contenteditable="true",即可编辑,我想做一个按钮,点击它之后,焦点处就自动出现一个可编辑的
如何在contenteditable div中删除非contenteditable div