文本域光标操作的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动画效果代码3
Apr 03 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
移动端web滚动分页的实现方法
May 05 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 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 Socket 编程
2010/04/09 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP引用返回用法示例
2016/05/28 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP attributes()函数讲解
2019/02/03 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
Python实现数据库编程方法详解
2015/06/09 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
详解HTML5中的标签
2015/06/19 HTML / CSS
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
大学生社会实践评语
2014/04/25 职场文书
公证委托书格式
2014/09/13 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
欠款起诉书范文
2015/05/19 职场文书
Mysql Show Profile
2021/04/05 MySQL
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏