文本域光标操作的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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
Vue制作Todo List网页
Apr 26 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
Python之str操作方法(详解)
2017/06/19 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
编程输出如下图形
2013/11/24 面试题
小学开学寄语
2014/01/19 职场文书
高考备战决心书
2014/03/11 职场文书
2014年党支部学习材料
2014/05/19 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python