div可编辑之contenteditable属性 二

以前说过，监听div可编辑的状态下使用的是DOMSubtreeModified监听，但DOMSubtreeModified并不兼容ie8，这就尴尬了。后来修改成使用定时器去监听内容的变化

例如：

//div获取焦点事件,监听文字是否超过1000字
listenDivTextEvent:function(obj,boolear){
	var self=this;
	var inits;
	//获取焦点
	obj.focus(function(){
		var _self=$(this);
		inits=setInterval(function(){
			var length=_self.text().length;
			if(boolear){
				if(length>0){
					_self.css("border-bottom","0px");
				}else{
					_self.css("border-bottom","1px solid #333");
					$(".record-textarea").css("border-bottom","0px solid #ccc");
					$(".textarea-last").css("border-bottom","1px solid #ccc");
				}
			}
			if(length>1000){
				var value = _self.text().substring(0,1000);
				_self.text(value); 
				self.moveLastDiv(_self[0]);
			}
					
		},100)
	});
	//失去焦点
	obj.blur(function(){
		clearInterval(inits);
	});
},

定时器虽然实现了监听，但在div编辑换行时各个浏览器的解析确是不同的，致使传到后台的结果不同，展现出现来的也不同，如下列出他们的区别

在谷歌，ie浏览器上解析换行用的是div标签，可是在火狐浏览器上解析换行用的是br标签

谷歌浏览器上效果图：

ie浏览器上效果图

火狐浏览器上效果图

当你在ie或谷歌浏览器上输入一段文字后，再删掉，div标签里的内容就是空的，可是在火狐浏览器上div标签里还有<br>标签，并不是空内容，致使展现数据的时候有问题，

因此上面代码就要作下修改

//div获取焦点事件,监听文字是否超过1000字
listenDivTextEvent:function(obj,boolear){
	var self=this;
	var inits;
	//获取焦点
	obj.focus(function(){
		var _self=$(this);
		inits=setInterval(function(){
			var length=_self.text().length;
			if(boolear){
				if(length>0){
					_self.css("border-bottom","0px");
				}else{
                    //由于火狐，谷歌，ie浏览器上解析换行不一样，加入这句话，就会让他们传入后台的值保持一致格式
					_self.find("br").remove();
					_self.css("border-bottom","1px solid #333");
					$(".record-textarea").css("border-bottom","0px solid #ccc");
					$(".textarea-last").css("border-bottom","1px solid #ccc");
				}
			}
			if(length>1000){
				var value = _self.text().substring(0,1000);
				_self.text(value); 
				self.moveLastDiv(_self[0]);
			}
					
		},100)
	});
	//失去焦点
	obj.blur(function(){
		clearInterval(inits);
	});
},

这样就完美了

div可编辑状态下对于复制过来的文本带有样式，有时候不须要这样的样式，就须要把复制过来的文本去除掉样式，有如下几种方式

1.contenteditable不只有true，false属性值，还有其余的一些值

contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"

其中“plaintext-only”这个属性就是让div只能键入文本值

缺点：支持性不太好，除了谷歌，火狐和ie都不支持

2.用正则表达题把复制过来的内容的标签替换掉

 d.innerHTML = d.innerHTML.replace( /<[^>]*>/g, "" );

缺点：当点击回车时没办法换行

3.把复制过来的文本移除掉样式

$("div").find("*").removeAttr("style");

上面代码再次修改成

//div获取焦点事件,监听文字是否超过1000字
listenDivTextEvent:function(obj,boolear){
	var self=this;
	var inits;
	//获取焦点
	obj.focus(function(){
		var _self=$(this);
		inits=setInterval(function(){
			var length=_self.text().length;
           //移除掉复制过来的文本的样式
			_self.find("*").removeAttr("style");
			_self.find("*").css({
					  "font-size": "15px",
					  "font-weight": "normal",
					  "color": "#333",
					  "line-height":"25px",
			});
			if(boolear){
				if(length>0){
					_self.css("border-bottom","0px");
				}else{
					_self.find("br").remove();
					_self.css("border-bottom","1px solid #333");
					$(".record-textarea").css("border-bottom","0px solid #ccc");
					$(".textarea-last").css("border-bottom","1px solid #ccc");
				}
			}
			if(length>1000){
				var value = _self.text().substring(0,1000);
				_self.text(value); 
				self.moveLastDiv(_self[0]);
			}
					
		},100)
	});
	//失去焦点
	obj.blur(function(){
		clearInterval(inits);
	});
},