<iframe id="fzone" style="width:400px;height:250px;"></iframe>
 <br />
   <input type="button" unselectable="on" value="Click" id="inp" /><script type="text/javascript">
<!--
   var currentPos = 0,edit;  
   window.onload=function(){
       edit=$("fzone").contentWindow;
       edit.document.designMode = "on";
       edit.document.contentEditable = true;
       edit.document.open();
       edit.document.write("123456789");
       edit.document.close();
       $("inp").onclick=function(){
           setCaret(this);
       }
       edit.document.onclick=function(){
           getPos(this);
           //alert("test")
       }
   }
   function setCaret(obj){
       var rng = obj.createTextRange();
       rng.collapse(true);
       rng.moveStart('character',currentPos);
       rng.select();
   } 
   function getPos(obj){    //用来获取光标位置
       obj.focus();
       var workRange=edit.document.selection.createRange();
       workRange.select();
       var allRange=edit.document.selection.createRange();
       workRange.setEndPoint("StartToStart",allRange);
       var len=workRange.text.length;
       workRange.collapse(false);
       workRange.select();
       currentPos=len;
   alert(len)//看看得到的效果
   }
   function $(oid){
       return document.getElementById(oid);
   }
//-->
</script> 是否需要这样?

解决方案 »

  1.   

    在IE里鼠标点进iframe就弹出上面的错误
      

  2.   

    obj.select();
    是多余的,
      

  3.   

    没错误了,不过焦点的位置总是0,获取不到鼠标焦点位置,我想实现当鼠标焦点移到iframe中的4之后,鼠标焦点离开iframe,点击input后鼠标焦点回到先前iframe中的4后面
      

  4.   

    写漏一句$("inp").onclick里的tobj是var tobj=edit.document.body
      

  5.   

    嗯,不过我想的是例如焦点onfocus在iframe里的4后面(不须选择),然后焦点移出iframe后点击input焦点就回到iframe里4后面
      

  6.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script type="text/javascript">
    <!--
       var currentPos = 0,edit;  
       window.onload=function(){
           edit=$("fzone").contentWindow;
       edit.document.designMode = "on";
       edit.document.contentEditable = true;
       edit.document.open();
       edit.document.write("123456789");
       edit.document.close();
       $("inp").onclick=function(){
           setCaret(edit.document.body);
       }
       edit.document.onclick=function(){
           getPos(this);
       //alert("test")
       }
       }
       function setCaret(obj){
       var rng = obj.createTextRange();
           rng.collapse(true);
       rng.moveStart('character',currentPos);
       rng.select();
       } 
       function getPos(obj){    
           obj.focus();
           var workRange=edit.document.selection.createRange();
           var allRange=edit.document.body.createTextRange(); //edit.document.selection.createRange()改为edit.document.body.createTextRange()
           workRange.setEndPoint("StartToStart",allRange);
           var len=workRange.text.length;
           workRange.collapse(false);
           workRange.select();
           currentPos=len;
       //alert(len);
       }
       function $(oid){
           return document.getElementById(oid);
       }
    //-->
    </script> 
    </head>
    <body>
       <iframe id="fzone" style="width:400px;height:250px;"></iframe>
       <br />
       <input type="button" unselectable="on" value="Click" id="inp" />
    </body>
    </html>