文本域光标操作的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操作页面表格,元素的一些技巧
Feb 02 Javascript
Google 静态地图API实现代码
Nov 19 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
jquery禁用右键示例
Apr 28 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 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之字符串变相相减的代码
2007/03/19 PHP
附件名前加网站名
2008/03/23 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
纯php生成随机密码
2015/10/30 PHP
php compact 通过变量创建数组
2016/11/15 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
javascript event 事件解析
2011/01/31 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python中的函数用法入门教程
2014/09/02 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python如何生成各种随机分布图
2018/08/27 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
最新党员思想汇报
2014/01/01 职场文书
超市端午节活动方案
2014/01/23 职场文书
个人安全承诺书
2014/05/22 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015年女生节活动总结
2015/02/27 职场文书
学历证明范文
2015/06/16 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL