首发-----凤凰前端脚本库之光标操作
程序员文章站
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); } }
日后会慢慢贴出其他的代码,只是学习之用。谢谢查看。
附上源码和例子,希望对你的学习有帮助,谢谢
上一篇: 浅谈grid的设计与性能
下一篇: js---面向对象OOP浅谈