欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 23:07:57
...

以前就一直研究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);
	}
}

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

 

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