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. });     
 
  

  
 
  
 
 
  
 
  
  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>