获取textarea光标位置

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Demo ： Textarea 元素的光标位置</title>  
  5.     <style type="text/css">  
  6.         #result  
  7.         {  
  8.             font-size: 18px;  
  9.             line-height: 25px;  
  10.             padding-left: 20px;  
  11.         }  
  12.     </style>  
  13. </head>  
  14. <body>  
  15.     <div>  
  16.         <h1>  
  17.             Textarea 元素的光标位置</h1>  
  18.         <ul>  
  19.             <li>获取 Textarea 元素当前的光标位置</li>  
  20.             <li>设置回原先的 Textarea 元素的光标位置</li>  
  21.             <li>在 Textarea 元素的光标位置插入文本</li>  
  22.         </ul>  
  23.         <form action="#">  
  24.         <textarea id="test" rows="8" cols="50"></textarea>  
  25.         <p>  
  26.             <input type="button" id="get" value="Get Cursor Position" />  
  27.             <input type="button" id="set" value="Set Cursor Position" />  
  28.             <input type="button" id="add" value="Add Text After Cursor Position" />  
  29.         </p>  
  30.         </form>  
  31.         <h2>  
  32.             Textarea Range：</h2>  
  33.         <div id="result">  
  34.         </div>  
  35.         <script type="text/javascript">  
  36.   
  37.             document.getElementById("get").onclick = function () {  
  38.                 //alert(tx.value.length);  
  39.                 var tx = document.getElementById("test");  
  40.                 var re = document.getElementById("result");  
  41.                 var pos = cursorPosition.get(tx);  
  42.                 re.innerHTML = ("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--' : pos.text));  
  43.             }  
  44.   
  45.             document.getElementById("set").onclick = function () {  
  46.                 var tx = document.getElementById("test");  
  47.                 var re = document.getElementById("result");  
  48.                 var pos = cursorPosition.get(tx);  
  49.                 cursorPosition.set(tx, pos);  
  50.                 re.innerHTML = "";  
  51.             }  
  52.   
  53.             document.getElementById("add").onclick = function () {  
  54.                 var tx = document.getElementById("test");  
  55.                 pos = cursorPosition.get(tx);  
  56.                 cursorPosition.add(tx, pos, input = prompt("你想插入替换的文本：", ""));  
  57.             }  
  58.   
  59.             /**  
  60.             * cursorPosition Object  
  61.             */  
  62.             var cursorPosition = {  
  63.                 get: function (textarea) {  
  64.                     var rangeData = { text: "", start: 0, end: 0 };  
  65.   
  66.                     if (textarea.setSelectionRange) { // W3C      
  67.                         textarea.focus();  
  68.                         rangeData.start = textarea.selectionStart;  
  69.                         rangeData.end = textarea.selectionEnd;  
  70.                         rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end) : "";  
  71.                     } else if (document.selection) { // IE  
  72.                         textarea.focus();  
  73.                         var i,  
  74.                 oS = document.selection.createRange(),  
  75.                         // Don't: oR = textarea.createTextRange()  
  76.                 oR = document.body.createTextRange();  
  77.                         oR.moveToElementText(textarea);  
  78.   
  79.                         rangeData.text = oS.text;  
  80.                         rangeData.bookmark = oS.getBookmark();  
  81.   
  82.                         // object.moveStart(sUnit [, iCount])   
  83.                         // Return Value: Integer that returns the number of units moved.  
  84.                         for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i++) {  
  85.                             // Why? You can alert(textarea.value.length)  
  86.                             if (textarea.value.charAt(i) == ' ') {  
  87.                                 i++;  
  88.                             }  
  89.                         }  
  90.                         rangeData.start = i;  
  91.                         rangeData.end = rangeData.text.length + rangeData.start;  
  92.                     }  
  93.   
  94.                     return rangeData;  
  95.                 },  
  96.   
  97.                 set: function (textarea, rangeData) {  
  98.                     var oR, start, end;  
  99.                     if (!rangeData) {  
  100.                         alert("You must get cursor position first.")  
  101.                     }  
  102.                     textarea.focus();  
  103.                     if (textarea.setSelectionRange) { // W3C  
  104.                         textarea.setSelectionRange(rangeData.start, rangeData.end);  
  105.                     } else if (textarea.createTextRange) { // IE  
  106.                         oR = textarea.createTextRange();  
  107.   
  108.                         // Fixbug : ues moveToBookmark()  
  109.                         // In IE, if cursor position at the end of textarea, the set function don't work  
  110.                         if (textarea.value.length === rangeData.start) {  
  111.                             //alert('hello')  
  112.                             oR.collapse(false);  
  113.                             oR.select();  
  114.                         } else {  
  115.                             oR.moveToBookmark(rangeData.bookmark);  
  116.                             oR.select();  
  117.                         }  
  118.                     }  
  119.                 },  
  120.   
  121.                 add: function (textarea, rangeData, text) {  
  122.                     var oValue, nValue, oR, sR, nStart, nEnd, st;  
  123.                     this.set(textarea, rangeData);  
  124.   
  125.                     if (textarea.setSelectionRange) { // W3C  
  126.                         oValue = textarea.value;  
  127.                         nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);  
  128.                         nStart = nEnd = rangeData.start + text.length;  
  129.                         st = textarea.scrollTop;  
  130.                         textarea.value = nValue;  
  131.                         // Fixbug:  
  132.                         // After textarea.values = nValue, scrollTop value to 0  
  133.                         if (textarea.scrollTop != st) {  
  134.                             textarea.scrollTop = st;  
  135.                         }  
  136.                         textarea.setSelectionRange(nStart, nEnd);  
  137.                     } else if (textarea.createTextRange) { // IE  
  138.                         sR = document.selection.createRange();  
  139.                         sR.text = text;  
  140.                         sR.setEndPoint('StartToEnd', sR);  
  141.                         sR.select();  
  142.                     }  
  143.                 }  
  144.             }  
  145.         </script>  
  146.     </div>  
  147. </body>  
  148. </html>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hsdying/p/9019828.html