文本域光标操作的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转化毫秒为时间格式代码
Apr 10 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
AngularJS基础知识
Dec 21 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
使用webpack打包后的vue项目如何正确运行(express)
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 图像尺寸调整代码
2010/05/26 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python学生管理系统
2019/01/30 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
pytorch之添加BN的实现
2020/01/06 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
领导的自我鉴定
2013/12/28 职场文书
写给老婆的检讨书
2014/02/21 职场文书
婚礼司仪主持词
2014/03/14 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
开会通知
2015/04/20 职场文书
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技