文本域光标操作的jQuery扩展分享_jquery

该针对文本域的扩展实现的功能及使用方法:
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);

加载于扩展代码,然后根据扩展中的方法名调用即可。

时间: 2024-09-19 01:23:28

文本域光标操作的jQuery扩展分享_jquery的相关文章

文本域光标操作的jQuery扩展分享

 最近的项目中,好几次用到操作文本域的方法,比如光标位置.删除光标前字符等.每次都是查阅资料(这部分操作涉及到的js方法都比较生僻),费时费事.于是就封装了一个jQuery扩展 该针对文本域的扩展实现的功能及使用方法: 1.获取光标位置:$(elem).iGetFieldPos(): 2.设置光标位置:$(elem).iSelectField(start): 3.选中指定位置内的字符:$(elem).iSelectField(start,end): 4.选中指定的字符:$(elem).iSele

jquery中文本域光标操作(选中、添加、删除、获取)

该针对文本域的扩展实现的功能及使用方法: 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

说明:代码在实际项目中测试通过,我已经省去些不重要的,大家可以重点看颜色标记的部分 前戏: 问:为什么做这个呢?? 答:项目中有个将录入的文本域文字保存到数据库中.'查看时'从数据库获取相应数据,显示在文本域中.开发期间发现换行符使用jquery 的val() 还是text()获取后不做处理,保存数据库中没有换行了,自然取出来显示也就没有换行符了!由此写了下面的文章----有点啰嗦啊! 复制代码 代码如下: <%@ page contentType="text/html;charset=U

常用jQuery代码分享_jquery

1.查看浏览器信息 navigator.userAgent 检索浏览器信息包括哪些字符 例如: if (navigator.userAgent.toLowerCase().indexOf("htc") >= 0) { $("#GuanKa .page_content").css("transform", "scale(0.92)"); $(".gaunka_pic").css("top&qu

Jquery 扩展方法_jquery

网上搜索了信息在编写JQUERY扩展方法有两种,一种是使用jquery.fn.extend,一种是jquery.extend. jquery.fn表示jquery.prototype,,给jquery对象添加方法.刚好用到扩展方法,并且使用jquery.fn,这里就写下jquery.fn的用法,这些网上很多,蛮写蛮写 比如当点击 button时弹出一个textbox的值加一个参数值 复制代码 代码如下: jquery.fn.extend({ alertMessage:function(messa

IE下支持文本框和密码框placeholder效果的JQuery插件分享_jquery

很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框. placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失. 下载地址:http://xiazai.jb51.net/201501/other/placeholderfriend.rar 实现代码如下: 复制代码 代码如下: (function($) {   /**    * 没有开花

一个JQuery操作Table的代码分享_jquery

复制代码 代码如下: 一.数据准备 <table id="table1"> <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>操作</th></tr> <tr><td>测试</td><td>测试</td><td>测试</td>&l

jquery 操作DOM案例代码分享_jquery

实例如下: 复制代码 代码如下: <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left;

让人期待的2011年度最佳 jQuery 插件分享_jquery

jQuery的易扩展性吸引了来自全球的开发者来共同编写 jQuery 插件,jQuery 插件不仅能够增强网站的可用性,有效的改善用户体验,还可以大大减少开发时间. Isotope Isotype 是一款非常优秀的 jQuery 插件,用于创建动态的,智能的布局.使用这款插件能够对一组页面项目进行过滤.排序等很多操作,而且带有非常酷的动画效果. FitText FitText 是一款文本大小自动调整插件 ,使用这款插件能够让你的Web项目在屏幕宽度不同的设备上自动调整字体大小. FlexSlid