文本域光标操作的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 相关文章推荐
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
jQuery实现全选按钮
Jan 01 jQuery
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函数method_exists()与is_callable()的区别
2013/06/21 PHP
PHP常用技巧汇总
2016/03/04 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
使用Python实现画一个中国地图
2019/11/23 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
Ejb技术面试题
2015/04/29 面试题
初中物理教学反思
2014/01/14 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
怎么写自荐书范文
2014/02/12 职场文书
大二学习计划书范文
2014/04/27 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
个人专业技术总结
2015/03/05 职场文书
工作会议通知
2015/04/15 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
Python中的程序流程控制语句
2022/02/24 Python