Javascript set and get methods Textarea cursor position

来源：互联网发布：信息流广告数据分析编辑：程序博客网时间：2024/06/03 19:29
<html><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS  Set the cursor position and access to Textarea  </title>  <script>    var isIE = !(!document.all);    function posCursor(){      var start=0,end=0;       var oTextarea = document.getElementById("textarea");      if(isIE){        //selection   Select the active area, a block of text that is highlighted  ,  And / or text which users can perform certain operations of the other elements  .        //createRange   Select the area from the current text object to create TextRange  ,        //  Select the area or from the control collection is created controlRange  .        var sTextRange= document.selection.createRange();        //  Determine the object selected is not textarea          if(sTextRange.parentElement()== oTextarea){          //  Create a TextRange object            var oTextRange = document.body.createTextRange();          // Range of mobile text to the beginning and end of the range to fully contain the text of a given element  .          oTextRange.moveToElementText(oTextarea);                    //  Then get two   TextRange          //oTextRange  Text field  (textarea)  Chinese version of the object TextRange            //sTextRange  TextRange text is selected the object region                //compareEndPoints  Introduce, compareEndPoints method is used to compare two  TextRange  Position of the object            //StartToEnd    Comparing the beginning and the parameters TextRange  TextRange  The end of the  .          //StartToStart  Comparing the beginning and the parameters TextRange  TextRange  The beginning of the  .          //EndToStart    Compared with the parameters at the end TextRange  TextRange  The beginning of the  .          //EndToEnd      Compared with the parameters at the end TextRange  TextRange  The end of the  .              //moveStart  Method of introduction, the scope of the beginning of the change            //character   Moved by the character            //word         Move by word            //sentence    Moved by the sentence            //textedit    Start editing action                //  Here we compare the oTextRange and  sTextRange  The beginning, the beginning to the selected location of the region            for (start=0; oTextRange.compareEndPoints("StartToStart", sTextRange) < 0; start++){             oTextRange.moveStart('character', 1);           }          //  Need to calculate  \n  The number of  (  The way characters move by excluding  \n,  So here together  )           for (var i = 0; i <= start; i ++){            if (oTextarea.value.charAt(i) == '\n'){               start++;             }          }               //  In calculating the position of one end of the            oTextRange.moveToElementText(oTextarea);           for (end = 0; oTextRange.compareEndPoints('StartToEnd', sTextRange) < 0; end ++){            oTextRange.moveStart('character', 1);          }          for (var i = 0; i <= end; i ++){            if (oTextarea.value.charAt(i) == '\n'){               end++;             }          }        }      }else{        start = oTextarea.selectionStart;        end = oTextarea.selectionEnd;      }      document.getElementById("start").value = start;       document.getElementById("end").value = end;    }            function moveCursor(){      var oTextarea = document.getElementById("textarea");      var start = parseInt(document.getElementById("start").value);       var end =  parseInt(document.getElementById("end").value);      if(isNaN(start)||isNaN(end)){        alert("  Location of input errors  ");      }      if(isIE){        var oTextRange = oTextarea.createTextRange();        var LStart = start;        var LEnd = end;        var start = 0;        var end = 0;        var value = oTextarea.value;        for(var i=0; i<value.length && i<LStart; i++){          var c = value.charAt(i);          if(c!='\n'){            start++;          }        }        for(var i=value.length-1; i>=LEnd && i>=0; i--){          var c = value.charAt(i);          if(c!='\n'){            end++;          }        }        oTextRange.moveStart('character', start);        oTextRange.moveEnd('character', -end);        //oTextRange.collapse(true);        oTextRange.select();        oTextarea.focus();      }else{        oTextarea.select();        oTextarea.selectionStart=start;        oTextarea.selectionEnd=end;      }    }   </script>  <body>    <table border="1" cellspacing="0" cellpadding="0">       <tr>         <td>start: <input type="text" size="3" value="0"/></td>         <td>end:   <input type="text"   size="3" value="0"/></td>       </tr>       <tr>       <td colspan="2">         <textarea          onKeydown="posCursor()"           onKeyup="posCursor()"           onmousedown="posCursor()"           onmouseup="posCursor()"                     rows="14"          cols="50">  Poppy   Chunhuaqiuyue when the living memories  .  Fashion goes in cycles east, my country next month in the bitterly painful  !  L bar carved jade puzzle should still  ,  Force is changed  .  Memories can be your misery? Is like a Spring River Flows East  .</textarea>         </td>       </tr>       <tr>         <td></td>         <td><input type="button" value="  Set cursor position  "/></td>       </tr>     </table>   </body></html>