Jquery 获得输入div光标的位置

在网上找了个IE里 JavaScript 的实现方法 ，但是 火狐谷歌等浏览器不行啊，我是想 Jquery 能不能实现呢？大家帮忙看一下，下面是 JavaScript 的实现方法：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
    <head>  
        <title> new document </title>  
    </head>  
    <body>  
        <div contentEditable="true" style="height:50px; border:2px solid red;"></div>  
        光标前的字符：<span id="selection"></span>  
        <script language="javascript">  
        <!--  
            var cursor = 0;// 光标位置  
  
            document.onselectionchange = function() {  
                var range = document.selection.createRange();  
                var srcele = range.parentElement();  
                var copy = document.body.createTextRange();  
                copy.moveToElementText(srcele);  
  
                for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; cursor++) {  
                    copy.moveStart("character", 1);  
                }  
                document.getElementById("selection").innerText = srcele.innerText.substring(cursor - 1, cursor);  
            }  
        //-->  
        </script>  
    </body>  
</html>  

解决方案 »

  1.   

    换个法子，onkeyup事件里获取innerHTML截取最后一位就好了呀。。（针对上面的例子！）你本来的问题，尝试通过innerHTML的length计算而来也行，不过这样太麻烦了。。
      

  2.   

    看来这个例子有点误导大家，其实我只是想得到光标的位置，还有就是输入的内容在 div 里
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>java Test</title> 
    </head> 
    <style type="text/css"> 
    <!-- 
    body,div { margin:0; padding:0;} 
    --> 
    </style> 
    <script type="text/javascript" src="js/jquery.js"></script> <body> 
    <div style="background:#ccc;height:300px;" onclick=""></div> 
    <div style="position:relative;"> 
    <div style=" position:absolute;left:50px; top:50px;" id="DivID"></div> 
    </div> 
    <script type="text/javascript"> 
    var X = $('#DivID').offset().top; 
    var Y = $('#DivID').offset().left; 
    document.write(X+"<br />"); 
    document.write(Y+"<br />"); 
    //获取相对(父元素)位置: 
    var C = $('#DivID').position().top; 
    var D = $('#DivID').position().left; 
    document.write(C+"<br />"); 
    document.write(D); 
    </script> 
    </body> 
    </html> 
      

  4.   


    <div id="testDiv">放在我上面</div> 
    <script type="text/javascript"> 
    $('#testDiv').mousemove(function(e) { 
    var xx = e.originalEvent.x || e.originalEvent.layerX || 0; 
    var yy = e.originalEvent.y || e.originalEvent.layerY || 0; 
    $(this).text(xx + '---' + yy); 
    }); 
    </script> 
      

  5.   

    您得到的是鼠标位置啊，请问光标位置能得吗
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>java Test</title> 
    </head>
    <script type="text/javascript" src="j143.js"></script> <body> <div id="testDiv" contentEditable="true" style="height:50px; border:2px solid red;" onclick="a.b()"></div> 
    <script type="text/javascript"> 
    var xx;
    var yy;
    $('#testDiv').mousemove(function(e) { 
     xx = e.originalEvent.x || e.originalEvent.layerX || 0; 
     yy = e.originalEvent.y || e.originalEvent.layerY || 0; 
    });
    var a = {
    b:function(){
    $('#testDiv').html(xx + '---' + yy);
    }
    }
    </script> 
    </body> 
    </html>