文本域光标操作的jQuery扩展分享


Posted in Javascript onMarch 10, 2014

该针对文本域的扩展实现的功能及使用方法:
1、获取光标位置:$(elem).iGetFieldPos();
2、设置光标位置:$(elem).iSelectField(start);
3、选中指定位置内的字符:$(elem).iSelectField(start,end);
4、选中指定的字符:$(elem).iSelectStr(str);
5、在光标之后插入字符串:$(elem).iAdd(str);
6、删除光标前面(-n)或者后面(n)的n个字符:$(elem).iDel(n);

jQuery扩展代码:

;(function($){
    /*
     * 文本域光标操作(选、添、删、取)的jQuery扩展
     */
    $.fn.extend({
        /*
         * 获取光标所在位置
         */
        iGetFieldPos:function(){
            var field=this.get(0);
            if(document.selection){
                //IE
                $(this).focus();
                var sel=document.selection;
                var range=sel.createRange();
                var dupRange=range.duplicate();
                dupRange.moveToElementText(field);
                dupRange.setEndPoint('EndToEnd',range);
                field.selectionStart=dupRange.text.length-range.text.length;
                field.selectionEnd=field.selectionStart+ range.text.length;
            }
            return field.selectionStart;
        },
        /*
         * 选中指定位置内字符 || 设置光标位置
         * --- 从start起选中(含第start个),到第end结束(不含第end个)
         * --- 若不输入end值,即为设置光标的位置(第start字符后)
         */
        iSelectField:function(start,end){
            var field=this.get(0);
            //end未定义,则为设置光标位置
            if(arguments[1]==undefined){
                end=start;
            }
            if(document.selection){
                //IE
                var range = field.createTextRange();
                range.moveEnd('character',-$(this).val().length);
                range.moveEnd('character',end);
                range.moveStart('character',start);
                range.select();
            }else{
                //非IE
                field.setSelectionRange(start,end);
                $(this).focus();
            }
        },
        /*
         * 选中指定字符串
         */
        iSelectStr:function(str){
            var field=this.get(0);
            var i=$(this).val().indexOf(str);
            i != -1 ? $(this).iSelectField(i,i+str.length) : false;
        },
        /*
         * 在光标之后插入字符串
         */
        iAddField:function(str){
            var field=this.get(0);
            var v=$(this).val();
            var len=$(this).val().length;
            if(document.selection){
                //IE
                $(this).focus()
                document.selection.createRange().text=str;
            }else{
                //非IE
                var selPos=field.selectionStart;
                $(this).val($(this).val().slice(0,field.selectionStart)+str+$(this).val().slice(field.selectionStart,len));
                this.iSelectField(selPos+str.length);
            };
        },
        /*
         * 删除光标前面(-)或者后面(+)的n个字符
         */
        iDelField:function(n){
            var field=this.get(0);
            var pos=$(this).iGetFieldPos();
            var v=$(this).val();
            //大于0则删除后面,小于0则删除前面
            $(this).val(n>0 ? v.slice(0,pos-n)+v.slice(pos) : v.slice(0,pos)+v.slice(pos-n));
            $(this).iSelectField(pos-(n<0 ? 0 : n));
        }
    });
})(jQuery);

加载于扩展代码,然后根据扩展中的方法名调用即可。

Javascript 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
如何提高数据访问速度
Dec 26 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jquery插件开发之实现google+圈子选择功能
Mar 10 #Javascript
js实现通用的微信分享组件示例
Mar 10 #Javascript
jquery基础教程之数组使用详解
Mar 10 #Javascript
查询json的数据结构的8种方式简介
Mar 10 #Javascript
js 3秒后跳转页面的实现代码
Mar 10 #Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 #Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 #Javascript
You might like
PHP仿盗链代码
2012/06/03 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
浏览器常用高宽的jquery插件
2011/02/24 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
新手学python应该下哪个版本
2020/06/11 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
金讯Java笔试题目
2013/06/18 面试题
学生出入校管理制度
2014/01/16 职场文书
教师新年寄语
2014/04/03 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
高中生逃课检讨书
2014/10/10 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
公司年夜饭通知
2015/04/25 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
win10清理dns缓存
2022/04/19 数码科技