RSS
热门关键字： 　css 　jquery 　select input 　asp jquery 　用户注册
当前位置 :| 主页>JQuery插件>

jquery插件之在光标处插入文本

来源： 作者： 时间：2008-07-16 Tag：JQuery   插件   点击：
本文提供用于往文本框[input:text , textarea]光标当前位置插入内容以及选中页面指定元素内容的js脚本，采用基于jQuery的插件形式。在 IE6,7 / Firefox / Safari / Opera 下测试通过。

jquery.caretInsert.js :

  1. jQuery.extend({   
  2.     /**  
  3.      * 清除当前选择内容  
  4.      */  
  5.     unselectContents: function(){   
  6.         if(window.getSelection)   
  7.             window.getSelection().removeAllRanges();   
  8.         else if(document.selection)   
  9.             document.selection.empty();   
  10.     }   
  11. });   
  12. jQuery.fn.extend({   
  13.     /**  
  14.      * 选中内容  
  15.      */  
  16.     selectContents: function(){   
  17.         $(this).each(function(i){   
  18.             var node = this;   
  19.             var selection, range, doc, win;   
  20.             if ((doc = node.ownerDocument) &&   
  21.                 (win = doc.defaultView) &&   
  22.                 typeof win.getSelection != 'undefined' &&   
  23.                 typeof doc.createRange != 'undefined' &&   
  24.                 (selection = window.getSelection()) &&   
  25.                 typeof selection.removeAllRanges != 'undefined')   
  26.             {   
  27.                 range = doc.createRange();   
  28.                 range.selectNode(node);   
  29.                 if(i == 0){   
  30.                     selection.removeAllRanges();   
  31.                 }   
  32.                 selection.addRange(range);   
  33.             }   
  34.             else if (document.body &&   
  35.                      typeof document.body.createTextRange != 'undefined' &&   
  36.                      (range = document.body.createTextRange()))   
  37.             {   
  38.                 range.moveToElementText(node);   
  39.                 range.select();   
  40.             }   
  41.         });   
  42.     },   
  43.     /**  
  44.      * 初始化对象以支持光标处插入内容  
  45.      */  
  46.     setCaret: function(){   
  47.         if(!$.browser.msie) return;   
  48.         var initSetCaret = function(){   
  49.             var textObj = $(this).get(0);   
  50.             textObj.caretPos = document.selection.createRange().duplicate();   
  51.         };   
  52.         $(this)   
  53.         .click(initSetCaret)   
  54.         .select(initSetCaret)   
  55.         .keyup(initSetCaret);   
  56.     },   
  57.     /**  
  58.      * 在当前对象光标处插入指定的内容  
  59.      */  
  60.     insertAtCaret: function(textFeildValue){   
  61.        var textObj = $(this).get(0);   
  62.        if(document.all && textObj.createTextRange && textObj.caretPos){   
  63.            var caretPos=textObj.caretPos;   
  64.            caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ?   
  65.                                textFeildValue+'' : textFeildValue;   
  66.        }   
  67.        else if(textObj.setSelectionRange){   
  68.            var rangeStart=textObj.selectionStart;   
  69.            var rangeEnd=textObj.selectionEnd;   
  70.            var tempStr1=textObj.value.substring(0,rangeStart);   
  71.            var tempStr2=textObj.value.substring(rangeEnd);   
  72.            textObj.value=tempStr1+textFeildValue+tempStr2;   
  73.            textObj.focus();   
  74.            var len=textFeildValue.length;   
  75.            textObj.setSelectionRange(rangeStart+len,rangeStart+len);   
  76.            textObj.blur();   
  77.        }   
  78.        else {   
  79.            textObj.value+=textFeildValue;   
  80.        }   
  81.     }   
  82. });   

 

demo代码段 :

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6. <script type="text/javascript"    
  7.    src="http://code.jquery.com/jquery-latest.pack.js"></script>  
  8. <script type="text/javascript"    
  9.    src="./jquery.caretInsert.js"></script>  
  10. </head>  
  11. <body>  
  12. <div><span id="item">TestText</span></div>  
  13. <div><input id="hello" type="text" style="width: 200px;" /></div>  
  14. <div><input type="button" value="Inert on input" id="insertA" /></div>  
  15. <div><textarea id="world" style="width: 200px;height:50px;"></textarea>  
  16. <div><input type="button" value="Inert on Textarea" id="insertT" /></div>  
  17. <script language="JavaScript" type="text/javascript">  
  18. (function($){   
  19.     $('#hello').setCaret();   
  20.     $('#insertA').click(function(){   
  21.         $('#hello').insertAtCaret($('#item').text());   
  22.     });   
  23.        
  24.     $('#world').setCaret();   
  25.     $('#insertT').click(function(){   
  26.         $('#world').insertAtCaret($('#item').text());   
  27.     });   
  28.   
  29.     $('#item').hover(   
  30.     function(){   
  31.         $(this).selectContents();   
  32.     },   
  33.     function(){   
  34.         $.unselectContents();   
  35.     });   
  36. })($);   
  37.   
  38. </script>  
  39. </body></html>  

[收藏] [推荐] [评论] [打印] [关闭]
上一篇：PQuery - PHP 加 JQuery
下一篇：jQuery颜色拾取面板插件
最新评论共有 0 位网友发表了评论
查看所有评论
发表评论
评论内容：不能超过250字，需审核，请自觉遵守互联网相关政策法规。
用户名： 密码：
匿名?
注册
栏目列表
热点关注
相关文章
Powered by DedeCms v_5_1_UTF8 ©2004-2008 DesDev Inc.