Javascript设置和获取Textarea的光标位置的方法 -

Relucent

浏览: 208643 次
性别:
来自: 北京

最近访客更多访客>>

xgwzw0011

devcang

mqyl1

默默小

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Javascript设置和获取Textarea的光标位置的方法

博客分类：

JavaScript IE Chrome C C++

<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()" 
          onmousedown="posCursor()" 
          onmouseup="posCursor()" 
          onfocus="posCursor()" 
          rows="14"
          cols="50">虞美人
春花秋月何时了，往事知多少。
小楼昨夜又东风，故国不堪回首月明中！
雕l栏玉砌应犹在，只是朱颜改。
问君能有几多愁？恰似一江春水向东流。</textarea> 
        </td> 
      </tr> 
      <tr> 
        <td></td> 
        <td><input type="button" onClick="moveCursor()" value="设置光标位置"/></td> 
      </tr> 
    </table> 
  </body>
</html>

分享到：

Spring--quartz中cronExpression配置说明 | ExtJS 3.1.0 中Ext.data.Store关于basePara ...

2010-07-20 11:05
浏览 6629
评论(6)
论坛回复 / 浏览 (5 / 11343)
分类:Web前端
查看更多

6 楼 haisee 2012-11-13

管用，Firefox和Chrom验证通过。

5 楼 cucumber 2010-08-08

chrome 兼容吗？？？

4 楼 ksqqxq 2010-08-05

正在找这样的东东呢！

3 楼 xieboxin 2010-07-25

经过我测试，IE，FF，Opera都没问题。

感谢楼主！

2 楼 la_ka 2010-07-25

看代码也知道LZ是IE兼容拉。。。

1 楼 dreampuf01 2010-07-22

以前看过一个..IE only.....这个兼容否?.

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Javascript设置和获取Textarea的光标位置的方法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Javascript设置和获取Textarea的光标位置的方法

评论

发表评论

相关推荐

【转】Closure Compiler 高级模式及更多思考(js文件压缩工具 )

Base64编码解码(JavaScript版本)

JavaScript 中2个等号与3个等号的区别

JS前端获取上传文件的大小的方法

ExtJS 3.1.0 中Ext.data.Store关于baseParams的BUG修正

JavaScript JSON 对象深拷贝方法（一例）

关于Extjs异步session超时问题处理

ExtJS 的组建扩展方法

JS 地图移动拖拽

JS移动的方块

JS对象序列化为JSON对象

JavaScript日期格式化

Ext智能提示 - Spket(Eclipse插件)

带选择框的JS树控件2 （为JSTree再次提速）

带选择框的JS树控件

多附件上传

HTML通过button触发input-file控件上传文件的问题

模拟线程Timer(JS)

转换Unicode (JS)

JS-Cookie

最近访客更多访客>>