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