文本域光标操作的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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
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正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
经验几则 推荐
2006/09/05 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
Python内置函数OCT详解
2016/11/09 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
Python中的TCP socket写法示例
2018/05/11 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python redis 删除key脚本的实例
2019/02/19 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
聊聊python中的循环遍历
2020/09/07 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
关于保护环境的建议书
2014/05/13 职场文书
授权委托书
2014/09/17 职场文书
师德师风整改措施
2014/10/24 职场文书
司机岗位职责范本
2015/04/10 职场文书
第一军规观后感
2015/06/12 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS