文本域光标操作的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 parseInt字符转化为数字函数使用小结
Nov 05 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
基于Vue实现timepicker
Apr 25 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
vue生命周期实例小结
Aug 15 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 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中的boolean(布尔)类型详解
2013/10/28 PHP
PHP线程的内存回收问题
2016/07/08 PHP
微信支付开发维权通知实例
2016/07/12 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
医务工作者先进事迹材料
2014/01/26 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
导师推荐信范文
2014/05/09 职场文书
公司担保书范文
2014/05/21 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技