文本域光标操作的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 event事件的传递与冒泡处理
Dec 06 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
js实现简单数字变动效果
Nov 06 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
js调用网络摄像头的方法
Dec 05 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
第十一节--重载
2006/11/16 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
9个比较实用的php代码片段
2016/03/15 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
javascript Keycode对照表
2009/10/24 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
python正则分析nginx的访问日志
2017/01/17 Python
Python接收手机短信的代码整理
2020/08/02 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
建筑投标担保书
2014/05/20 职场文书
英语教师求职信
2014/06/16 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
计算机实训心得体会
2016/01/14 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript