js实现文本内容光标定位，获取光标位置

最新推荐文章于 2024-06-21 20:36:59 发布

luminer

最新推荐文章于 2024-06-21 20:36:59 发布

阅读量6.3k

点赞数 4

分类专栏：前端文章标签：光标定位

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

原文网址:http://www.iteye.com/topic/716748

效果如图：

源码：

<html><head>  
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>JS设置及获取Textarea的光标位置</title>  
  <script>  
    var isIE = !(!document.all);  
    function posCursor(){  
      var start=0,end=0;   
      var oTextarea = document.getElementById("textarea");  
      if(isIE){  
        //selection 当前激活选中区，即高亮文本块，和/或文当中用户可执行某些操作的其它元素。  
        //createRange 从当前文本选中区中创建 TextRange 对象，  
        //或从控件选中区中创建 controlRange 集合。  
        var sTextRange= document.selection.createRange();  
  
        //判断选中的是不是textarea对象  
        if(sTextRange.parentElement()== oTextarea){  
          //创建一个TextRange对象  
          var oTextRange = document.body.createTextRange();  
          //移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本。  
          oTextRange.moveToElementText(oTextarea);  
            
          //此时得到两个 TextRange  
          //oTextRange文本域(textarea)中文本的TextRange对象  
          //sTextRange是选中区域文本的TextRange对象  
      
          //compareEndPoints方法介绍，compareEndPoints方法用于比较两个TextRange对象的位置  
          //StartToEnd  比较TextRange开头与参数TextRange的末尾。  
          //StartToStart比较TextRange开头与参数TextRange的开头。  
          //EndToStart  比较TextRange末尾与参数TextRange的开头。  
          //EndToEnd    比较TextRange末尾与参数TextRange的末尾。  
      
          //moveStart方法介绍，更改范围的开始位置  
          //character 按字符移动  
          //word       按单词移动  
          //sentence  按句子移动  
          //textedit  启动编辑动作  
      
          //这里我们比较oTextRange和sTextRange的开头，的到选中区域的开头位置  
          for (start=0; oTextRange.compareEndPoints("StartToStart", sTextRange) < 0; start++){   
            oTextRange.moveStart('character', 1);   
          }  
          //需要计算一下\n的数目(按字符移动的方式不计\n,所以这里加上)   
          for (var i = 0; i <= start; i ++){  
            if (oTextarea.value.charAt(i) == '\n'){   
              start++;   
            }  
          }   
      
          //再计算一次结束的位置  
          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("位置输入错误");  
      }  
      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" id="start" size="3" value="0"/></td>   
        <td>end:   <input type="text" id="end"   size="3" value="0"/></td>   
      </tr>   
      <tr>   
      <td colspan="2">   
        <textarea id="textarea"  
          onKeydown="posCursor()"   
          onKeyup="posCursor()"   
          οnmοusedοwn="posCursor()"   
          οnmοuseup="posCursor()"   
          οnfοcus="posCursor()"   
          rows="14"  
          cols="50">虞美人  
春花秋月何时了，往事知多少。  
小楼昨夜又东风，故国不堪回首月明中！  
雕l栏玉砌应犹在，只是朱颜改。  
问君能有几多愁？恰似一江春水向东流。</textarea>   
        </td>   
      </tr>   
      <tr>   
        <td></td>   
        <td><input type="button" onClick="moveCursor()" value="设置光标位置"/></td>   
      </tr>   
    </table>   
  </body>  
</html>

luminer

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现文本内容光标定位，获取光标位置

原文网址:http://www.iteye.com/topic/716748效果如图：源码： JS设置及获取Textarea的光标位置 var isIE = !(!document.all); function posCursor(){ var start=0,end=0; var oTex
复制链接

扫一扫

专栏目录