文本域光标操作的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 私有成员分析
Jan 13 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
模拟select的代码
Oct 19 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
js表单登陆验证示例
Oct 19 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
js实现缓动动画
Nov 25 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
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
JPype实现在python中调用JAVA的实例
2017/07/19 Python
python正则实现提取电话功能
2018/02/24 Python
python3.4实现邮件发送功能
2018/05/28 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
python flask框架实现重定向功能示例
2019/07/02 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python 代码运行时间获取方式详解
2020/09/18 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
数控技术专科生自我评价
2014/01/08 职场文书
买房子个人收入证明
2014/01/16 职场文书
员工工作自我评价
2014/09/26 职场文书
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS