文本域光标操作的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得到网页中所有的div的id
Oct 19 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
jquery 获取json数据实现代码
Apr 27 Javascript
Three.js学习之几何形状
Aug 01 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
详解http访问解析流程原理
Oct 18 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue实现Toast组件轻提示
Apr 10 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中取得文件的后缀名?
2012/02/20 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
js new Date()实例测试
2019/10/31 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
建筑工程毕业生自我鉴定
2014/01/14 职场文书
交通事故调解协议书
2014/04/16 职场文书
学生操行评语大全
2014/04/24 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript