文本域光标操作的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 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
node.js实现登录注册页面
Apr 08 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
JS随机密码生成算法
2019/09/23 Javascript
详解vue 组件
2020/06/11 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python如何修改装饰器中参数
2018/03/20 Python
python实现flappy bird游戏
2018/12/24 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
校园环保标语
2014/06/13 职场文书
员工培训协议书
2014/09/15 职场文书
国情备忘录观后感
2015/06/04 职场文书
新学期主题班会
2015/08/17 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS