这次总算把系统前台中一个关于光标定位的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; };