如何根据textarea的光标位置给DIV定位

如题，我想使用 JS 获取 当前 Textarea 中光标的位置（Top,Left）的值，并根据此值 给预设的 DIV 重新定位

解决方案 »

  1.   

    <html>
    <head>
    <title>TEST</title>
    <style>
    body,td{
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 12px;
    }
    </style>
    <script type="text/javascript">
        var start=0;
        var end=0;
        function add(){        
            var textBox = document.getElementById("ta");
            var pre = textBox.value.substr(0, start);
            var post = textBox.value.substr(end);
            textBox.value = pre + document.getElementById("inputtext").value + post;
        }
        function savePos(textBox){
            //如果是Firefox(1.5)的话，方法很简单
            if(typeof(textBox.selectionStart) == "number"){
                start = textBox.selectionStart;
                end = textBox.selectionEnd;
            }
            //下面是IE(6.0)的方法，麻烦得很，还要计算上'\n'
            else if(document.selection){
                var range = document.selection.createRange();
                if(range.parentElement().id == textBox.id){
                    // create a selection of the whole textarea
                    var range_all = document.body.createTextRange();
                    range_all.moveToElementText(textBox);
                    //两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)
                    //range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则                //返回小于0的值，则range_all往右移一点，直到两个range的start相同。
                    // calculate selection start point by moving beginning of range_all to beginning of range
                    for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
                        range_all.moveStart('character', 1);
                    // get number of line breaks from textarea start to selection start and add them to start
                    // 计算一下\n
                    for (var i = 0; i <= start; i ++){
                        if (textBox.value.charAt(i) == '\n')
                            start++;
                    }
                    // create a selection of the whole textarea
                     var range_all = document.body.createTextRange();
                     range_all.moveToElementText(textBox);
                     // calculate selection end point by moving beginning of range_all to end of range
                     for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
                         range_all.moveStart('character', 1);
                         // get number of line breaks from textarea start to selection end and add them to end
                         for (var i = 0; i <= end; i ++){
                             if (textBox.value.charAt(i) == '\n')
                                 end ++;
                         }
                    }
                }
            document.getElementById("start").value = start;
            document.getElementById("end").value = end;
        }
    </script>
    </head>
    <body>
    <form action="a.cgi">
    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td>start: <input type="text" id="start" size="3"/></td>
            <td>end: <input type="text" id="end" size="3"/></td>
        </tr>
        <tr>
            <td colspan="2">
                <textarea id="ta" onKeydown="savePos(this)" 
                                  onKeyup="savePos(this)" 
                                  onmousedown="savePos(this)" 
                                  onmouseup="savePos(this)" 
                                  onfocus="savePos(this)" 
                                  rows="14" cols="50"></textarea>
            </td>
        </tr>
        <tr>
            <td><input type="text" id="inputtext" /></td>
            <td><input type="button" onClick="add()" value="Add Text"/></td>
        </tr>
    </table>
    </form>
    </body>
    </html>
      

  2.   

    先谢谢楼上的。
    但是请不要随便从网络上 COPY 代码过来，应为并不是完全适用的。我需要的是 获取当前光标 所在屏幕的绝对位置
      

  3.   

    知道如何(js) 实时获取当前 文本框控件 在屏幕的坐标？并把 预定的DIV 显示在 该控件的正下方？
    var left =obj.offsetLeft;
    var top = obj.offsetTop + obj.offsetHeight;这个top  获取第一个文本框的坐标是对的，但是 第二个开始 就 偏离得很离谱.for i=0 to n
    <input name="ActionDateI<%=I%>"  id="ActionDateI<%=I%>"  value=""/>
    ......
    next
      

  4.   

    <script   language="javascript">   
      function   test(obj)   
      {   
              var   arrPos   =   getPos(obj);   
              var   oRange   =   document.selection.createRange();   
              alert("当前光标TOP:"   +   (parseInt(oRange.offsetTop,10)   +   parseInt(arrPos[0],10))   +   "\n"     
                          +   "当前光标LEFT："   +   (parseInt(oRange.offsetLeft,10)   +   parseInt(arrPos[1],10)));   
        
      }   
        
      function   getPos(obj)   
      {   
              var   pos   =   new   Array();   
              var   t=obj.offsetTop;   
              var   l=obj.offsetLeft;   
              while(obj=obj.offsetParent)   
              {   
                      t+=obj.offsetTop;   
                      l+=obj.offsetLeft;   
              }   
              pos[0]   =   t;   
              pos[1]   =   l;   
              return   pos;   
      }   
      </script>   
      <textarea   NAME="txt" onkeydown="test(this)">htrdh  sdafkjdslgjoegiojea thdth </textarea>