如何将一段html插入到div中光标所在位置？


<!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 >

解决方案 »

  1.   


    <!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">   
      <HTML>   
      <HEAD>   
      <TITLE>   New   Document   </TITLE>   
      <META   NAME="Generator"   CONTENT="EditPlus">   
      <META   NAME="Author"   CONTENT="">   
      <META   NAME="Keywords"   CONTENT="">   
      <META   NAME="Description"   CONTENT="">   
      </HEAD>   
        
      <BODY>   
      <SCRIPT   LANGUAGE="JScript">   
      function   insertTxt()   
      {   
      var   sel   =   document.selection;   
      if   (sel!=null)   {   
      var   oRng   =   sel.createRange();   
      if   (oRng!=null) oRng.text=("bluedestiny");   
      }   
      }   
      </SCRIPT>   
      <textarea   onclick="insertTxt()">   
      光标位置插入   
      </textarea>   
      </BODY>   
      </HTML>   
      
      

  2.   

    To:s_liangchao1s
    你理解错了我的意思吧
      

  3.   

    <html>
    <head>
    <mete http-equiv="content-type" content="text/html;charset=gb2312"/>
    <title>DIV编辑器</title>
    <script type='text/javascript' src='edit.js'>
    </script>
    </head>
    <body>
    <div id="editor" contenteditable="true" class="b" style="width: 99%; height: 212px;border:solid 1px"></div>
    <input type="button" value="插入HTML" onclick="InSert()"/>
    <script type="text/javascript">
    var et=document.getElementById("editor");
    function InSert()
    {
     var html="<font color='red'>test</font>";
     et.focus();//获取焦点
     document.selection.createRange().pasteHTML(html);//设置焦点处的内容,如果选取了内容,会替换内容,否则插入新的内容
    }
    </script>
    </body>
    </html>
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>fangjian.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script>
    function inner()
    {
    var theDiv=document.getElementById("div_id");
    theDiv.innerHTML=document.getElementById("text_id").value;
    }
    </script>
      </head>
      
      <body>
        

    <div id="div_id">
    这是层：
    </div>

    想要插入的html：<input type="text" id="text_id"> <input type="button" name="ok" value="插入" onclick="inner()">

      </body>
    </html>
      

  5.   

      恩  showbo  不错..例子很好.
      

  6.   

    看看 DHTML之textRange对象
    http://hi.baidu.com/black8/blog/item/f02d680898c0ab960a7b8293.html