文本域光标操作的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创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
js和jquery中获取非行间样式
May 05 jQuery
js事件委托和事件代理案例分享
Jul 25 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 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中反射的应用
2016/03/15 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
生成二维码方法汇总
2014/12/26 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
python监控文件或目录变化
2016/06/07 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
django用户登录验证的完整示例代码
2019/07/21 Python
详解Python实现进度条的4种方式
2020/01/15 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
销售职业生涯规划范文
2014/03/14 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
安全伴我行主题班会
2015/08/13 职场文书
初中语文教师研修日志
2015/11/13 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python