文本域光标操作的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 相关文章推荐
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 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
在项目中寻找代码的坏命名
2012/07/14 PHP
php中错误处理操作实例分析
2019/08/23 PHP
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
js实现点击生成随机div
2020/01/16 Javascript
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
C++程序员求职信
2014/05/07 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
计算机毕业生求职信
2014/06/10 职场文书
球队口号
2014/06/18 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
中班教师个人总结
2015/02/05 职场文书
开天辟地观后感
2015/06/09 职场文书
告知书格式
2015/07/01 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
深入理解 Golang 的字符串
2022/05/04 Golang