Javascript set and get methods Textarea cursor position

最新推荐文章于 2024-05-31 14:23:22 发布

转载最新推荐文章于 2024-05-31 14:23:22 发布 · 1.1k 阅读

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现动态设置文本区域光标位置的方法，包括处理不同浏览器环境下的兼容性问题，通过事件监听实现光标位置的实时更新与控制。

<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>