文本域光标操作的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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
判断访客终端类型集锦
Jun 05 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
Jqprint实现页面打印
Jan 06 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
php实现的日历程序
2015/06/18 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
学徒工职责
2014/03/06 职场文书
2014年三万活动总结
2014/04/26 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
法院信息化建设方案
2014/05/21 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
班主任自我评价范文
2015/03/11 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书