首发-----凤凰前端脚本库之光标操作

以前就一直研究jQuery和prototype,从到百度这个来工作开始就一直研究tangram,从那会开始就一直想自己慢慢地积累写一个Lib（以前参与写过一个公司级的toft,情节啊），当然原因只是积累和学习，建议所有前端人士如果你有毅力的话可以自己整理写一个lib，因为在你写的时候，你会发现各种问题，然后你会查阅资料去解决这些问题，这样的提升比你简单地去使用api要好很多。

 

废话少说，今天贴出的只是最近整理的关于光标的一些api的处理，简单地上传，供各位同学一起学习研究。

 

 

/*
****   phoenix lib    version 1.0.1 ****
@author zhangyaochun 
@just for 87
@baidu fe
@个人博客--http://zhangyaochun.iteye.com/
@info 简单地介绍一下这个库--凤凰
1.what is phoenix---它是本人学习积累的一个库,部分思想来源tangram,prototype,jquery等一些开源框架,采用分离式api设计,没有绝对的核心
2.这个库的目标：第一目标是兼容性-----保证兼容各大浏览器,简单地说就是能用
                第二目标是可读性-----保证看到这个库的人能从里面看明白一些东西,从而选择你所需的
                下面就是api设计的一致性和前瞻性还有简单性是日后一直追求的
				有部分安全性防范的api设计理念，防止代码白跑
3.优化思想		有作用域链的优化思想
				独立命名空间下的功能模块，防污染
************************************************************************************************
   phoenix.textareaUtil.js这个主要是对于光标的一些操作
   api简介:1. getCursorPosition-----获取当前光标的位置
           2. getSelectedText-------获取选中的文本
		   3. setSelection----------选中一个指定区间的文本
		   4. setCursorPosition-----设置光标的到达指定位置
		   5. setSelectionText------选中一个指定的文本
		   6. deleteText------------删除光标前后的指定个字符
*/
var phoenix =phoenix || {version:'1.0.1'};

phoenix.textareaUtil = phoenix.textareaUtil || {};

//后期考虑做快捷方式的调用优化,可读性的杀手啊

/*
获取当前光标的位置
@Method getCursorPosition
@param {HTMLElement}  --element  绑定的textarea对象
@return {Number}  ---result  当前光标的位置
@remark 约定当前没有光标就返回0
 ff和opera下如果文本区域没有光标返回的是value.length
 chrome和ie是0
*/
phoenix.textareaUtil.getCursorPosition = function(element){
   var result =0;
	//处理兼容
   if(document.selection){
     //ie
	 element.focus();
	 var ds = document.selection
	 var range = ds.createRange();
	 var g = range.duplicate();
	 g.moveToElementText(element);
	 g.setEndPoint("EndToEnd",range);
	 element.selectionStart = g.text.length - range.text.length;
	 element.selectionEnd = element.selectionStart +range.text.length;
	 result = element.selectionStart;
   }else{
     //ff-chrome-opera
	 //加层判断
	 if(element.selectionStart || element.selectionStart == "0"){
	    //ff和opera多是element.value.length
		//chrome
		result = element.selectionStart;
	 }
   }
   return result;
},


/*
获取选中的文本
@Method getSelectedText
@param {HTMLElement}   ---element
@return {String} | "" ---result
@remark 约定如果没有选中返回""
*/
phoenix.textareaUtil.getSelectedText = function(element){
    var result="";
	var find = function(el){
	   if(el.selectionStart != undefined && el.selectionEnd != undefined){
	      return el.value.slice(el.selectionStart,el.selectionEnd);
	   }else{
	      return "";
	   }
	}
	if(window.getSelection){
	   //ff-chrome-opera
	   result = find(element);
	}else{
	   //ie
	   result = document.selection.createRange().text;
	}
	return result;
},



/*
选中从start到end之间的文本
@Method setSelection 
@param {HTMLElement}  --element
@param {Number}  ---start index
@param {Number}    ---end index
*/
phoenix.textareaUtil.setSelection = function(element,start,end){
     if(document.selection){
	     var range = element.createTextRange();
		 range.moveEnd('character',end-element.value.length);
		 range.moveStart('character',start);
		 range.select();
	 }else{
	     element.setSelectionRange(start,end);
		 element.focus();
	 }
},


/*
设置光标的到达指定位置
@Method setCursorPosition 
@param e{HTMLElement}  --element
@param pos{Number}  ---position
@remark 这个api依赖于setSelection
*/
phoenix.textareaUtil.setCursorPosition = function(element,pos){
   this.setSelection(element,pos,pos);
},


/*
选中一个指定的文本
@Method setSelectionText also can call findText
@param {HTMLElement}  ---element
@param  {String} ---- string
@return index
@remark 这个api依赖于setSelection
    if no find return false
*/
phoenix.textareaUtil.setSelectionText = function(element,string){
     var index = element.value.indexOf(string);
	 return index!= -1 ? this.setSelection(element,index,index+string.length) : false;
},

/*
删除光标前后的指定个字符
@Method deleteText
@param {HTMLElement} element
@param number {Number} 删除前后的number个字符
@remark if number >0  删除前面number个字符 反之
@remak 解决兼容性问题存在的bug ---发生场景
                              1.是有滚动条---先记录后针对ff进行setTimeout复制 ---ff最新的版本已经没有这个问题了
                              2.如果光标前面没有可删除的 ---由于slice自身的api设置参数end如果为负会返回string.length +end
							  但是substring又不支持参数为负,暂时采用
	***思考:如果当前光标就在第一位，其实可以return false---对用户的效果是一样的，而且代码不必要走***						  
*/
phoenix.textareaUtil.deleteText = function(element,number){
    var scrolTop = element.scrollTop;  //记录旧的scrollTop 针对ff的bug
    var curpos = this.getCursorPosition(element);   //当前光标的位置
	var val = element.value;     //textarea输入的值
	//改变删除后的文本值
	//当curpos为0的话 会由于slice的自身原因返回错误(如上注释)
	/*element.value = number > 0 ? val.slice(0,curpos - number) + val.slice(curpos) :
	                             val.slice(0,curpos) + val.slice(curpos - number);*/
    //测试后暂时先用这个substring(0,-2)后会返回"",不会像slice一样slice(0,-2)变成slice(0,string.length-2);	 
	 element.value = number > 0 ? val.substring(0,curpos - number) + val.substring(curpos) :
	                             val.substring(0,curpos) + val.substring(curpos - number);							 
    //直接走-- 控制光标的位置
	//ff下Bug是在出现滚动条的时候删除文字后scrollTop会自动置0
	//ie下Bug是删除之后的光标计算有问题
	this.setSelection(element, curpos-(number <0 ? 0 : number),curpos-(number <0 ? 0 : number));
	//console.log(scrolTop);
	//处理一下ff的scrollTop为0的bug（ff的最新版本已经没有这个问题了）
	var isFf= /firefox\/(\d+\.\d+)/i.test(navigator.userAgent) ? +RegExp['\x241']: undefined;
	if(isFf != undefined){
	   setTimeout(function(){
	      //做法就是那开始记录的复制回去
		  if(element.scrollTop != scrolTop){
		     element.scrollTop == scrolTop;
		  }
	   },10);
	}
}

 日后会慢慢贴出其他的代码，只是学习之用。谢谢查看。

 

附上源码和例子，希望对你的学习有帮助，谢谢