楼上的代码很有创意。
作了一点小修正:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Document Title</title>
<style type="text/css">
.t{
background-image:url("http://jiaxue.10mb.cn/itext/i.gif");
background-repeat:no-repeat;
background-position:2px 4px;
width:400px;
height:200px;
line-height:18px;
font-size:14px;
padding:5px 0px 0px 10px;
background-attachment:fixed;
}
</style>
</head><body><textarea id="jia" class="t" onkeyup="setl();" onclick="setl();" onscroll="setl();">
这是一些内容
这是一些内容
这是一些内容
这是一些内容
</textarea>
<script language="javascript">        
function setl(){
var jia = document.getElementById("jia");
var rng = document.selection.createRange();
jia.style.backgroundPosition = "2px "+(rng.boundingTop-20+jia.scrollTop)+"px";
}
</script>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
    <head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Document Title</title>
    <style type="text/css">
    .t{
    width:400px;
    height:200px;
    padding:5px 0px 0px 10px;
    }
    </style>
    </head><body>
    <div style="position:absolute;width:0px;">
      <div id=cursorDiv style="position: relative; background-color: red; width: 3px;"></div>
    </div>
    <textarea id="jia" class="t" onkeyup="setl();" onclick="setl();" onscroll="setl();" >
    这是一些内容
    这是一些内容
    这是一些内容
    这是一些内容
    </textarea>
    <script language="javascript">                                
    function setl(){
    var jia = document.getElementById("jia");
    var rng = document.selection.createRange();
    cursorDiv.style.top = rng.boundingTop-18+jia.scrollTop;
    }
    </script>
    </body>
    </html>