文本域光标操作的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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
原生js实现轮播图特效
May 04 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
react中hook介绍以及使用教程
Dec 11 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+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python Grid使用和布局详解
2018/06/30 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
python实现马丁策略的实例详解
2021/01/15 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
生日宴会答谢词
2014/01/09 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
python实现简单区块链结构
2021/04/25 Python
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
python之django路由和视图案例教程
2021/07/26 Python
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python