文本域光标操作的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 相关文章推荐
Jquery下判断Id是否存在的代码
Jan 06 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
vue-hook-form使用详解
Apr 07 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
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实现图片裁剪、添加水印效果代码
2014/10/01 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
document.all与WEB标准
2020/05/13 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
python数据结构之链表详解
2017/09/12 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python实现图片九宫格分割
2021/03/07 Python
python标记语句块使用方法总结
2019/08/05 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
Django URL参数Template反向解析
2020/11/24 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
自考生自我鉴定范文
2013/10/01 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
作风建设剖析材料
2014/10/06 职场文书
硕士论文致谢范文
2015/05/14 职场文书