鼠标选取文字，添加背景色

写的一段js代码，实现的功能是：鼠标选中文本，添加背景色。

原始文本如下：

当鼠标划下文字，并且放开鼠标时，会弹出一个选中颜色的框：

点击弹出的颜色选择框，就可以为选中的文字添加背景色：

当然，代码中还有些问题没有处理，比如颜色选择框，我是用的<li>表示的，并且设置的display=inline-block。所以在ie的低版本下，就会出现问题了，因为低版本ie不支持inline-block的属性，就会被认为是block，有问题存在，就这样吧，如果你有兴趣，可以自己试试利用浮动处理这些个颜色选择框吧，应该是可以兼容各版本浏览器的。

还有个问题，就是，选中的代码，不能把其他的html标签截断哦。截断的情况下，在强大的ie下，是没有任何问题的，在其他浏览器下，就会抛出错误的。

代码如下：

html代码：

<div class = "main">
	<div id = "selsectArea">
	<p>我是一名<span>工程师</span>我是一名工程师我是一名工程师我是一名工程师我是一名工程师我是一名工程师<br />我是一名工程师我是一名工程师<i>我是一名工程师</i>我是一名工程师我是一名工程师我是名工程师<br />我是一名工程师我是一名工程师我是一名工程师我是一名工程师我是一名工程师我是一名工程师<br />我是一名工程师我是一名工程师我是一名工程师我是一名工程师我是一名工程师我是一名工程师</p>
	</div>
</div>

css代码

#zylChooserColor{width:200px;border:2px solid #000;margin:1px;border-radius:2px;box-shadow:1px 1px 1px #aaa;position:absolute;background:#FFF;}
#zylChooserColor p{padding:5px 10px;border-bottom:1px solid grey;margin-bottom:5px;}
#zylChooserColor .creatU{list-style-type:none;padding:5px 10px;}
#zylChooserColor .creatL{cursor:pointer;display:inline-block;margin:2px;width:32px;height:32px;}
#zylChooserColor .creatS{position: relative;left: 65px;top: -5px;cursor: pointer;display: inline-block;}

js代码

var setWordColor = {
	element:"",   //目标id的对象
	selectColor:"#FFF",  //选择的颜色保存
	selectWord:"",      //选择的文字
	colors:["blue","green","red","yellow","grey"],    //可供选择的颜色库
	begin:function(ele){      //绑定
		if(ele){
			this.element = this.basic.$(ele);      //绑定元素
		}
		if(this.element){
			//只有在找到目标id的情况下，才会执行，否则认为绑定出错，不做动作。
			setWordColor.createDiv.create();               //创建颜色选择弹出框
			setWordColor.basic.addEvent(this.element,"mousedown",this.bind.selectWordStart);//绑定鼠标按下事件。
		}else{
			alert("绑定失败，请检查是否存在 id= "+ele+" 的元素！");
		}
	},
	addColor:function(str){
		//添加颜色表
	},
	delColor:function(str){
		//删除颜色表
	}
};
setWordColor.basic = {
	$:function(id){
	//获取目标id，找不到则返回空
		return document.getElementById(id)?document.getElementById(id):"";
	},
	getEvent:function(e){
	//获取事件
		return e || window.event;
	},
	getTarget:function(e){
	//获取事件触发的元素对象
		e = this.getEvent(e)
		return e.srcElement || e.target;
	},
	addEvent:function(obj,eType,fuc){
	//事件绑定函数
		if(obj.addEventListener){ 
			obj.addEventListener(eType,fuc,false); 
		}else if(obj.attachEvent){ 
			obj.attachEvent("on" + eType,fuc); 
		}else{ 
			obj["on" + eType] = fuc; 
		}
	},
	removeEvent:function(obj,eType,fuc){
	//事件解除绑定函数
		if(obj.removeEventListener){ 
			obj.removeEventListener(eType,fuc,false); 
		}else if(obj.attachEvent){ 
			obj.detachEvent("on" + eType,fuc); 
		} 
	},
	stopPropagation:function(e){
	//阻止冒泡
		e = this.getEvent(e);
		if(e.stopPropagation){
			e.stopPropagation();
		}else{
		//IE
			e.cancelBubble = true;
		}
	},
	preventDefault:function(e){
	//取消事件
		e = getEvent(e);
		if(e.preventDefault){
			e.preventDefault();
		}else{
		//IE
			e.returnValue = false;
		}
	},
	getPPosition:function(e){
	//返回鼠标位置的坐标
		e = setWordColor.basic.getEvent(e);
		var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
		var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
		return {'x':x,'y':y};
	}
};
setWordColor.createDiv = {
	create:function(){ 
	//创建颜色列表的div
		if("" == setWordColor.basic.$("zylChooserColor")){
			var creDiv = document.createElement("div");
			creDiv.id = "zylChooserColor";
			var creatH = document.createElement("p");
			creatH.appendChild(document.createTextNode("请选择标注颜色"));
			var creatS = document.createElement("span");
			creatS.appendChild(document.createTextNode("X"));
			creatS.className = "creatS";
			setWordColor.basic.addEvent(creatS,"click",this.hideDiv);
			creatH.appendChild(creatS);
			creDiv.appendChild(creatH);
			var creatU = document.createElement("ul");
			creatU.className = "creatU";
			var creatL = "";
			var rgblist = "rgb(255,255,255)";
			var createLnode = "";
			var colorList = setWordColor.colors;
			for(var i=0,len = colorList.length;i<len;i++){
				creatL = document.createElement("li");
				creatL.className = "creatL";
				rgblist = colorList[i];
				creatL.style.cssText = "background-color:"+rgblist;
				createLnode = document.createAttribute("tar");
				createLnode.value = rgblist;
				creatL.setAttributeNode(createLnode);
				creatU.appendChild(creatL);
			}
			setWordColor.basic.addEvent(creatU,"click",this.liclick);
			creDiv.appendChild(creatU);
			var roc = document.body || document.documentElement;
			roc.appendChild(creDiv);
			this.hideDiv();           //选择颜色表之后，隐藏。
		}
	},
	liclick:function(e){      
	//颜色表中，颜色的绑定的回调函数
		e = setWordColor.basic.getEvent(e);
		var getTarget = setWordColor.basic.getTarget(e);
		if(getTarget.tagName.toLowerCase() == "li"){
			var getTar = getTarget.getAttribute("tar");
			setWordColor.selectColor = getTar;//给一个变量赋值
			setWordColor.createDiv.hideDiv();//隐藏
			setWordColor.bind.changeColor();//变色
			setWordColor.basic.stopPropagation(e);//功能达到，停止冒泡
		}
	},
	showDiv:function(e){  
	//显示颜色表
		var Position = setWordColor.basic.getPPosition(e);
		var csstext = "top:"+(Position.y-0+10)+"px;left:"+(Position.x-5)+"px";
		setWordColor.basic.$("zylChooserColor").style.cssText = csstext;
	},
	hideDiv:function(){   
	//隐藏颜色表
		if("" != setWordColor.basic.$("zylChooserColor")){
			var csstext = "top:0px;left:-1000px;";
			setWordColor.basic.$("zylChooserColor").style.cssText = csstext;
		}
	}
};
setWordColor.bind = {
	selectWordStart:function(){    
	//监听鼠标按下的回调函数
		setWordColor.basic.addEvent(setWordColor.element,"mouseup",setWordColor.bind.selectWordEnd);
	},
	selectWordEnd:function(e){     
	//监听鼠标放开的回调函数
		var word = "";
		//对选中文字的处理
		if(document.selection){
			var sel = document.selection.createRange();
			word = sel.text;
			setWordColor.selectWord = document.selection.createRange();
		}else if(window.getSelection){
			word=window.getSelection();
			setWordColor.selectWord = window.getSelection().getRangeAt(0);
		}
		if(word != ""){
			setWordColor.createDiv.showDiv(e);
		}
	},
	changeColor:function(){     
	//选择颜色之后，对选中文字的变色函数
		if(!setWordColor.selectWord){
			alert("您还没有选择词语，请选择！");
		}else{
			if(document.selection){
				setWordColor.selectWord.execCommand("BackColor", true, setWordColor.selectColor);
			}else{
				var span = document.createElement("span");
				span.style.cssText = "background-color:"+setWordColor.selectColor;
				try{
					setWordColor.selectWord.surroundContents(span);
				}catch(ex){
					alert("选择出错，请保证不要跨段落选择文本,不要截断页面特殊格式的词语！");
					console.log("error name:"+ex.name+"<br />error message:"+ex.message);
				}
			}
			//变色完成，把相关的参数初始化。
			setWordColor.selectColor = "#FFF";
			setWordColor.selectWord = "";
		}
	}
};

用法也很简单：

在上面的js代码加载之后，调用

//执行调用方法。
setWordColor.begin("selsectArea");即可

注意：当前的代码，必须是由id进行绑定的。如果找不到目标id，则绑定失败。而且一个页面，只能对一个id进行绑定的哦，如果你想要绑定多个事件，自己想想怎么改动的方法吧！！！

欢迎有兴趣的交流学习！！如果你发现有什么问题，感谢您的指正。