• 获取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>  
  • 相关阅读:
    10、函数介绍、函数参数、函数的返回值
    9、bytes类型，文件处理
    8、集合类型、文件处理
    7、列表类型、元组、字典类型
    6、for循环补充、可变类型与不可变类型、基本操作
    5、while循环与for循环
    4、基本运算符、if语法
    3、变量、常量、基本数据类型
    爬虫（一）
    小技能（二）
  • 原文地址：https://www.cnblogs.com/hsdying/p/9019828.html
Copyright © 2020-2023  润新知