关于文本域中光标定位问题

这次总算把系统前台中一个关于光标定位的bug给解决了~~~这里的文本框选择的对象在JS 的API文档中貌似没有仔细讲，而且犀牛书中也对此只是一笔带过。。。网上查了蛮多的资料，下面总结一下废话不说，直奔代码：（以jQ插件写的，外闭包省略）

	/**
	 * 设置光标指针工具函数
	 * @param {mix} pos
	 */
	$.fn.setFocus = function (pos){
		
		var DOMele = $(this).get(0);
		
		var _pos = 0;
		if(typeof pos == 'string'){
			if(pos == 'first'){
				_pos = 0;
			}else if(pos == 'last'){
				_pos = DOMele.value.length;
			}
		}else if(typeof pos == 'number'){
			_pos = pos;
		}

		if (document.all && DOMele.createTextRange) {//IE
            var range = DOMele.createTextRange();
			range.move("character",_pos);
			//range.moveStart('character',_pos);
			//range.collapse(true);
			range.select();
        }else {//FF
            if (DOMele.setSelectionRange) {
                DOMele.setSelectionRange(_pos, _pos);
				DOMele.focus();
            }
        }
		
		return this;
		
	};

在选择对象中包含有两种不兼容的对象，IE和FF，chrome兼容两种（还有一种DOM L2中定义的对象，貌似不常用，这里略讲）

 

IE开始：

IE的选择对象通过下面的语句创建：

 var range = DOMele.createTextRange();

  生成的是一个TextRange范围对象，后面的一系列操作都得和它有关

这个对象含有一些属性和方法如下：（参考原文参照此：http://hi.baidu.com/longtao_1986/blog/item/c95cae30fa666410ebc4afbb.html）

 

属性 
boundingHeight 获取绑定TextRange对象的矩形的高度 
boundingLeft 获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的距离 
offsetLeft 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置 
offsetTop 获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置 
htmlText 获取绑定TextRange对象的矩形的宽度 
text 设置或获取范围内包含的文本 
方法 
moveStart 更改范围的开始位置 
moveEnd 更改范围的结束位置 
collapse 将插入点移动到当前范围的开始或结尾 
move 折叠给定文本范围并将空范围移动给定单元数 
execCommand 在当前文档、当前选中区或给定范围上执行命令 
select 将当前选择区置为当前对象 
findText 在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。 

 

这里我们最常用到的无非是这么几个方法moveStar，moveEnd ，collapse，move，select 等

moveStar，moveEnd ，move这几个方法的格式形如：

move("Unit"[,count])

这边的”Unit“可以是它指定的单位有character(字符)、word(词)、sentence(段落)、textedit。

collapse是定位在开始处或者结束处，以boolean 的传入

而据我试验——在IE下确定光标时可以有两种方法：

var range = DOMele.createTextRange();
range.move("character",_pos);
range.select();

  上面这种是直接用move传入

var range = DOMele.createTextRange();
range.moveStart('character',_pos);
range.collapse(true);
range.select();

  上面这种是用moveStart定位，配合用collapse传入true

有一点要注意最后的select也是直接用范围对象引用，此间不与文本框DOM对象交互，恰恰这点是和FF完全不同的

IE的选择对象的使用，浅浅的讲到这里：

 

下面是FF和chrome的

相对于IE的复杂，FF的会稍许简单~

首先是不同的创建方法：

 

DOMele.setSelectionRange(_pos, _pos);

  用一个DOM对象的成员函数形式setSelectionRange创建，其中传入首末的光标指针地址

这里是我要显示光标，所以把首末设成一样的。

最后选择的话于IE不同：直接以DOM对象成员方法focus聚焦到文本框

 

综合而言FF的比较符合人对编程的操作习惯，而IE的或多或少有点生硬~

 

下面来个大点的，以后等我研究透caretPos这个玩意再更新~~哈哈（以前从网上c的，后来因为需求有变被我改了很多）

 

 

	  
   
   /**
     * 插入tagTpl文字内容
     * @param {String} tagTpl 需要插入的文本模板 
     * @param {Boolean} selectAble 是否需要选中
     */
    $.fn.insertAtCaret = function(tagTpl,selectAble){
		
        var textObj = $(this).get(0);
		
        if (document.all && textObj.createTextRange && textObj.caretPos) {

            var caretPos = textObj.caretPos;
            caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == "" ? tagTpl + "" : tagTpl;

			var re = eval("/" + tagTpl + "/i");
	        var startPos = textObj.value.search(re);
	        var endPos = textObj.innerHTML.length;
	        var endPosOffset = -(endPos - startPos - tagTpl.length) - 1;
	        var range = textObj.createTextRange();
	        var sel = range.duplicate();
			if(selectAble){
	        	sel.moveStart("character", startPos + 1);
	            sel.moveEnd("character", endPosOffset);
			}else{
				sel.move("character", endPos);
			}
	        sel.select();

        }else {
            if (textObj.setSelectionRange) {

                var rangeStart = textObj.selectionStart;
                var rangeEnd = textObj.selectionEnd;
                var tempStr1 = textObj.value.substring(0, rangeStart);
                var tempStr2 = textObj.value.substring(rangeEnd);
                textObj.value = tempStr1 + tagTpl + tempStr2;
				var len = tagTpl.length;
				if (selectAble) {
					textObj.setSelectionRange(rangeStart + 1, rangeStart + len - 1);
				}else{
					textObj.setSelectionRange(rangeStart + len, rangeStart + len);
				}
				textObj.focus();
            }else {
                if (document.all && textObj.createTextRange) {

                    textObj.value += tagTpl;
					var re = eval("/" + tagTpl + "/i");
					var startPos = textObj.value.search(re);
					var endPos = textObj.innerHTML.length;
					var endPosOffset = -(endPos - startPos - tagTpl.length) - 1;
					var range = textObj.createTextRange();
					var sel = range.duplicate();
					if (selectAble) {
						sel.moveStart("character", startPos + 1);
						sel.moveEnd("character", endPosOffset);
					} else {
						sel.move("character", endPos);
					}
					sel.select();
                } else {
                    textObj.value += tagTpl
                }
            }
        }
		
        return this;
		
    };

参考文章：(看了好多文章还是感觉这边的api比较模糊，等下次真正搞清楚再更新)

http://www.iteye.com/topic/749383

http://www.zhangxinxu.com/wordpress/?p=755

http://blog.csdn.net/qiaogang2003/archive/2007/11/06/1870025.aspx

http://hi.baidu.com/wangjiashui/blog/item/da1e4e6eabbe96dc80cb4a29.html

http://www.popo4j.com/article/Jquery-insert-content-at-the-cursor-position.html

http://hi.baidu.com/longtao_1986/blog/item/c95cae30fa666410ebc4afbb.html

http://aronlulu.iteye.com/blog/354467