文本域光标操作的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);

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

赞 (0)

相关推荐

  • JQuery在光标位置插入内容的实现代码

    复制代码 代码如下: (function($){ $.fn.extend({ insertAtCaret: function(myValue){ var $t=$(this)[0]; if (document.selection) { this.focus(); sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if ($t.selectionStart || $t.selection

  • 基于jQuery的输入框在光标位置插入内容, 并选中

    复制代码 代码如下: // //使用方法 //$(文本域选择器).insertContent("插入的内容"); //$(文本域选择器).insertContent("插入的内容",数值); //根据数值选中插入文本内容两边的边界, 数值: 0是表示插入文字全部选择,-1表示插入文字两边各少选中一个字符. // //在光标位置插入内容, 并选中 (function($) { $.fn.extend({ insertContent: function(myValue,

  • JQuery文本改变触发事件如聚焦事件、失焦事件

    Juery中聚焦事件: 复制代码 代码如下: $("#id").focus(function(){ }); 失焦事件: 复制代码 代码如下: $("#id").blur(function(){ }); 但是文本改变事件却不能这样写: 复制代码 代码如下: $("#id").change(function(){ }); 文本改变事件可以这样写,propertychange是属性改变时触发事件 复制代码 代码如下: $("#id"

  • jquery实现在光标位置插入内容的方法

    本文实例讲述了jquery实现在光标位置插入内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>  <head>      <title>无标题页</title>      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>     

  • jQuery设置聚焦并使光标位置在文字最后的实现方法

    如下所示: $.fn.setCursorPosition = function(position) { if (this.lengh == 0) return this; return $(this).setSelection(position, position); }; $.fn.setSelection = function(selectionStart, selectionEnd) { if (this.lengh == 0) return this; input = this[0];

  • jquery聚焦文本框与扩展文本框聚焦方法

    光标聚焦的位置在最前面 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title&g

  • jQuery往textarea中光标所在位置插入文本的方法

    本文实例讲述了jQuery往textarea中光标所在位置插入文本的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <script src="jquery-1.8.1.min.js"></script> <script > $(function() { /* 在textarea处插入文本--Start */ (function($) { $.fn.extend({ insertContent : f

  • 文本域光标操作的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扩展代

  • java启动jar包将日志打印到文本的简单操作

    启动命令: java -jar weichi-1.0.0.jar 将命令打印到1.log上 java -jar weichi-1.0.0.jar > 1.log 补充知识:Java中日志的使用(包含指定日志信息输出到指定地方) 一.前言 对于我们开发者而言,日志存在的意义十分重大:本文主要是自己整理了关于日志的一些知识点,希望能帮助到需要的人,也希望各位能指出我的错误. 二.日志的作用 ① 记录运行信息,方便调试 ② 记录错误信息,方便排查错误 ③ 存储运行记录,方便后期的数据分析 三.日志的主

  • java解析{{}}变量名以及文本内容替换操作

    发短信.发邮件的时候经常会遇到模板内容需要替换成实际数据的问题,本文介绍从文本模板中解析出变量列表,以及参数填入后得到实际文本内容的办法: /** * 根据正则表达式获取文本中的变量名列表 * @param pattern * @param content * @return */ public static List<String> getParams(String pattern, String content) { Pattern p = Pattern.compile(pattern)

  • 基于jquery的选择标签至文本域效果,可多选/可过滤重复/可限制个数的实现代码

    暂时没有对手动输入的做判断, 需要的话, 可自行在keyup及change事件中添加相关判断. 相关说明及调用方法,请参见代码中的注释. 演示及代码: 选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think /*reset css*/ body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,\5b8b\4f53} div,h2,p,input,select{margin:0;padding:0} input{vertica

  • JQuery扩展对象方法操作示例

    本文实例讲述了JQuery扩展对象方法操作.分享给大家供大家参考,具体如下: 应项目需求,对JQuery进行了一个扩展,需求如下: 项目中需要在浏览器右下角提示操作错误和系统提示内容,并有滑动移出和关闭的效果,所以自己写了一个效果还可以的弹出框来.就是给JQuery添加了一个方法ShowMsg. 先上代码: $.fn.extend({ ShowMsg: function (width, height, msgTitle_, msgContent_) { var TopY = 0; //初始化元素

  • IOS 开发之UITextField的光标操作扩展

    IOS 开发之UITextField的光标操作扩展 简介 在iOS开发中,有时候需要完全自主的定义键盘,用于完整的单词输入,例如计算机应用中,需要一次性的输入sin(,在移动光标时要完整的跳过sin(,在删除时也要完整的删除,这就需要对光标的位置进行精确控制,而ios并没有相关的函数可以直接操作光标,只给出了选择某个区域的功能,本文将介绍基于区域选择设计的UITextField扩展,用于获取光标位置以及移动光标. 实现原理 光标位置的获取 在textField中,有一个属性称之为selected

  • 全面解析DOM操作和jQuery实现选项移动操作代码分享

    DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>DOM选项移动操作</title> <style> select { width: px; height: px; } div { display: inline-block; width: px } </style> <

  • 关于脚本操作文本域的问题

    用的jsp+servlert 在文本框里输入的内容到达最右侧以后,文本内容就会自动回行 而我在存入数据库显示的时候想要得到和录入的形式完全符合的内容,没有办法获得. 即我只能找到硬回车而无法识别内容满以后自动回行的内容. 我现在想有没有一种方法可以从文本域中获得一行一行的读取内容,类似于读文本文件的readline 哪位高手能帮我下,给点建议 文本域中的换行在数据库里显示不出来 但确实存在 读取数据后在文本域中显示格式是原来的格式 不会变 如果想直接显示在网页上 需要str.replace("\

  • jQuery扩展+xml实现表单验证功能的方法

    本文实例讲述了jQuery扩展+xml实现表单验证功能的方法.分享给大家供大家参考,具体如下: 此处表单验证jQuery 引用jquery.1.8.2.js,md5.js 扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法) String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim 方法问题 (function($) { $.elementVal = new

  • JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    本文实例讲述了JavaScript实现点击单选按钮改变输入框中文本域内容的方法.分享给大家供大家参考.具体如下: 这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript点击单选框改变输入框内容</title> </

随机推荐