文本域光标操作的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实现自定义标签
May 08 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
如何使用CocosCreator对象池
Apr 14 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递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
佳能德国网上商店:Canon德国
2017/03/18 全球购物
网络安全方面的面试题
2015/11/04 面试题
《学会待客》教学反思
2014/02/22 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
积极向上的团队口号
2014/06/06 职场文书
小学运动会班级口号
2014/06/09 职场文书
2014年班组工作总结
2014/11/20 职场文书
财政局长个人总结
2015/03/04 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫