文本域光标操作的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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
微信小程序 navbar实例详解
May 11 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
微信小程序实现的picker多级联动功能示例
May 23 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/01 无线电
SONY SRF-M100的电路分析
2021/03/02 无线电
转PHP手册及PHP编程标准
2006/12/17 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php统计数组元素个数的方法
2015/07/02 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python 项目目录结构设置
2020/02/14 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
应届生财务管理求职信
2013/11/06 职场文书
运动会解说词200字
2014/02/06 职场文书
绩效考核实施方案
2014/03/18 职场文书
师德师风建设方案
2014/05/08 职场文书
党在我心中演讲稿
2014/09/02 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
优秀大学生自荐信
2015/03/26 职场文书
2015年食品安全工作总结
2015/05/15 职场文书