帮我释疑,谢谢

<html>   
   <head>   
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
   <meta name="GENERATOR" content="Microsoft FrontPage 4.0">   
   <meta name="ProgId" content="FrontPage.Editor.Document">   
   <title>光标位置</title>   
   <style>   
   INPUT{border: 1 solid #000000}   
   BODY,TABLE{font-size: 10pt}   
   </style>   
   </head>   
   <body>  
   <table border="0" width="700" cellspacing="0" cellpadding="0">   
   <tr>   
   <td width="479" rowspan="7">    
 
   <script>   
   function movePoint()   
   {   
   var pn=parseInt(pnum.value);   
   if(isNaN(pn))   
   return;    
   var rng= document.body.createTextRange();
   rng.moveToElementText(box)
   rng.moveStart("character",pn);   
   rng.collapse(true);   
   rng.select();   
   returnCase(rng)   
   }   
   function tellPoint(e)   
   {   
   //var rng=event.srcElement.createTextRange();
   var rng= document.body.createTextRange();
   rng.moveToElementText(box)    
   rng.moveToPoint(event.x,event.y);   
   rng.moveStart("character",-box.innerHTML.length) 
   if(document.selection)   
   {   
   var sw=document.selection.createRange().text.length;
   alert('当前选种文字的文字从'+parseInt(rng.text.length-sw)+'到'+rng.text.length)    
   }  
     
   pnum.value=rng.text.length   
   returnCase(rng)   
   }   
  
   function returnCase(rng)   
   {   
   bh.innerText=rng.boundingHeight;   
   bl.innerText=rng.boundingLeft;   
   bt.innerText=rng.boundingTop;   
   bw.innerText=rng.boundingWidth;   
   ot.innerText=rng.offsetTop;   
   ol.innerText=rng.offsetLeft;   
   t.innerText=rng.text;   
   }   
  
   function selectText(sp,ep)   
   {   
   sp=parseInt(sp)   
   ep=parseInt(ep)   
   if(isNaN(sp)||isNaN(ep))   
   return;   
   var rng= document.body.createTextRange();
   rng.moveToElementText(box)   
   rng.moveEnd("character",-box.innerHTML.length)   
   rng.moveStart("character",box.innerHTML.length)   
   rng.collapse(true);   
   rng.moveEnd("character",ep)   
   rng.moveStart("character",sp)   
   rng.select();   
   returnCase(rng);   
   }   
   var rg=document.body.createTextRange(); 
   rg.moveToElementText(box)  
   function findText(tw)   
   {   
   if(tw=="")   
   return;   
   var sw=0;   
   if(document.selection)   
   {   
   sw=document.selection.createRange().text.length;   
   }   
   rg.moveEnd("character",box.innerHTML.length);   
   rg.moveStart("character",sw);   
  
   if(rg.findText(tw))   
   {   
   rg.select();   
   returnCase(rg);   
   }   
   if(rg.text!=tw)   
   {   
   alert("已经搜索完了");  
   rg=document.body.createTextRange(); 
   rg.moveToElementText(box)  
   }   
   }   
   </script>   
   </p>   
   <p></p>   
   光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置">   
   <p></p>   
   选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择">   
   <p></p>   
   选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择">   
   </td>   
   <td width="217">boundingHeight:&nbsp;<span id="bh"></span></td>   
   </tr>   
   <tr>   
   <td width="217">boundingWidth:&nbsp;<span id="bw"></span></td>   
   </tr>   
   <tr>   
   <td width="217">boundingTop:&nbsp;<span id="bt"></span></td>   
   </tr>   
   <tr>   
   <td width="217">boundingLeft:&nbsp;<span id="bl"></span></td>   
   </tr>   
   <tr>   
   <td width="217">offsetLeft:&nbsp;<span id="ol"></span> </td>   
   </tr>   
   <tr>   
   <td width="217">offsetTop:&nbsp;<span id="ot"></span> </td>   
   </tr>   
   <tr>   
   <td width="217">text:&nbsp;<span style="position: absolute; z-index: 10" id="t"></span> </td>   
   </tr>   
   </table>  
   <div contentEditable="true"  id="box" onclick=tellPoint(this)>  
1. 入库作业、出库作业、清点作业等功能操作允许多单并行操作，即根据调拨单据号或清点单据号可接收多个作业单据，通过选择不同的作业单据进行实际操作。 
   </div>    
   </body>   
   </html>

解决方案 »

  1.   

    出错在 tellPoint(e)   
     
      

  2.   

    将JavaScript代码放到 div id='box' 之后
    <div contentEditable="true"  id="box" onclick=tellPoint(this)>  
    1. 入库作业、出库作业、清点作业等功能操作允许多单并行操作，即根据调拨单据号或清点单据号可接收多个作业单据，通过选择不同的作业单据进行实际操作。 
       </div> 
      

  3.   


    更改后
    <html>   
       <head>   
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
       <meta name="GENERATOR" content="Microsoft FrontPage 4.0">   
       <meta name="ProgId" content="FrontPage.Editor.Document">   
       <title>光标位置</title>   
       <style>   
       INPUT{border: 1 solid #000000}   
       BODY,TABLE{font-size: 10pt}   
       </style>   
       </head>   
       <body>  
       <table border="0" width="700" cellspacing="0" cellpadding="0">   
       <tr>   
       <td width="479" rowspan="7">    
     
       <script>   
       function movePoint()   
       {   
       var pn=parseInt(pnum.value);   
       if(isNaN(pn))   
       return;    
       var rng= document.body.createTextRange();
       rng.moveToElementText(box)
       rng.moveStart("character",pn);   
       rng.collapse(true);   
       rng.select();   
       returnCase(rng)   
       }   
       function returnCase(rng)   
       {   
       bh.innerText=rng.boundingHeight;   
       bl.innerText=rng.boundingLeft;   
       bt.innerText=rng.boundingTop;   
       bw.innerText=rng.boundingWidth;   
       ot.innerText=rng.offsetTop;   
       ol.innerText=rng.offsetLeft;   
       t.innerText=rng.text;   
       }   
      
       function selectText(sp,ep)   
       {   
       sp=parseInt(sp)   
       ep=parseInt(ep)   
       if(isNaN(sp)||isNaN(ep))   
       return;   
       var rng= document.body.createTextRange();
       rng.moveToElementText(box)   
       rng.moveEnd("character",-box.innerHTML.length)   
       rng.moveStart("character",box.innerHTML.length)   
       rng.collapse(true);   
       rng.moveEnd("character",ep)   
       rng.moveStart("character",sp)   
       rng.select();   
       returnCase(rng);   
       }   
       var rg=document.body.createTextRange(); 
       rg.moveToElementText(box)  
       function findText(tw)   
       {   
       if(tw=="")   
       return;   
       var sw=0;   
       if(document.selection)   
       {   
       sw=document.selection.createRange().text.length;   
       }   
       rg.moveEnd("character",box.innerHTML.length);   
       rg.moveStart("character",sw);   
      
       if(rg.findText(tw))   
       {   
       rg.select();   
       returnCase(rg);   
       }   
       if(rg.text!=tw)   
       {   
       alert("已经搜索完了");  
       rg=document.body.createTextRange(); 
       rg.moveToElementText(box)  
       }   
       }   
       </script>   
       </p>   
       <p></p>   
       光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置">   
       <p></p>   
       选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择">   
       <p></p>   
       选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择">   
       </td>   
       <td width="217">boundingHeight:&nbsp;<span id="bh"></span></td>   
       </tr>   
       <tr>   
       <td width="217">boundingWidth:&nbsp;<span id="bw"></span></td>   
       </tr>   
       <tr>   
       <td width="217">boundingTop:&nbsp;<span id="bt"></span></td>   
       </tr>   
       <tr>   
       <td width="217">boundingLeft:&nbsp;<span id="bl"></span></td>   
       </tr>   
       <tr>   
       <td width="217">offsetLeft:&nbsp;<span id="ol"></span> </td>   
       </tr>   
       <tr>   
       <td width="217">offsetTop:&nbsp;<span id="ot"></span> </td>   
       </tr>   
       <tr>   
       <td width="217">text:&nbsp;<span style="position: absolute; z-index: 10" id="t"></span> </td>   
       </tr>   
       </table>  
       <div contentEditable="true"  id="box" onclick=tellPoint(this)>  
    1. 入库作业、出库作业、清点作业等功能操作允许多单并行操作，即根据调拨单据号或清点单据号可接收多个作业单据，通过选择不同的作业单据进行实际操作。 
       </div>    
       <script>
        function tellPoint(e)   
       {   
       //var rng=event.srcElement.createTextRange();
       var rng= document.body.createTextRange();
       rng.moveToElementText(box)    
       rng.moveToPoint(event.x,event.y);   
       rng.moveStart("character",-box.innerHTML.length) 
       if(document.selection)   
       {   
       var sw=document.selection.createRange().text.length;
       alert('当前选种文字的文字从'+parseInt(rng.text.length-sw)+'到'+rng.text.length)    
       }  
         
       pnum.value=rng.text.length   
       returnCase(rng)   
       }   
       </script>
       </body>   
       </html>
    问题依旧
      

  4.   

    事实是只有当<div>位于第一位置时，才正确，猜测与 event.x event.y 有关，怎么样做到与位置无关呢？
      

  5.   


    div 的ID=box  div在下面这段代码之前应该就没问题了。如果在下面的代码之后，会有脚本错误，box未定义var rng= document.body.createTextRange();
    rng.moveToElementText(box);
    你说的问题是指什么呢？
      

  6.   

    还是加载顺序问题 HTML默认从上到下的顺序加载 head中的最先加载 所以楼主可以考虑把js写在head里或者用window.onload来执行JS代码
      

  7.   

    我又仔细看了下 问题主要出在rng.moveToElementText(box)这样直接使用box对象作为参数的地方，那么box对象必须在方法之前加载
    moveToElementText这个函数没用过，不过如果可以直接放对象是不是先把对象放在变量里这里引用变量，比如先
    var a=document.getElementById("box");
    再rng.moveToElementText(a)；
    这样不知道行不行
      

  8.   

    你指的错误是什么错误？
    是出现未定义吗？如果是的话，只要这么改即可：
    <!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=gb2312">   
       <meta name="GENERATOR" content="Microsoft FrontPage 4.0">   
       <meta name="ProgId" content="FrontPage.Editor.Document">   
       <title>光标位置</title>   
       <style>   
       INPUT{border: 1 solid #000000}   
       BODY,TABLE{font-size: 10pt}   
       </style>   
       </head>   
       <body>  
       <table border="0" width="700" cellspacing="0" cellpadding="0">   
       <tr>   
       <td width="479" rowspan="7" height="300">    
     
       <script>   
       function movePoint()   
       {   
       var pn=parseInt(pnum.value);   
       if(isNaN(pn))   
       return;    
       var rng= document.body.createTextRange();
       rng.moveToElementText(box)
       rng.moveStart("character",pn);   
       rng.collapse(true);   
       rng.select();   
       returnCase(rng)   
       }   
       function tellPoint(e)   
       {   
       //var rng=event.srcElement.createTextRange();
       var rng= document.body.createTextRange();
       rng.moveToElementText(box)    
       rng.moveToPoint(event.x,event.y);   
       rng.moveStart("character",-box.innerHTML.length) 
       if(document.selection)   
       {   
       var sw=document.selection.createRange().text.length;
       alert('当前选种文字的文字从'+parseInt(rng.text.length-sw)+'到'+rng.text.length)    
       }  
         
       pnum.value=rng.text.length   
       returnCase(rng)   
       }   
      
       function returnCase(rng)   
       {   
       bh.innerText=rng.boundingHeight;   
       bl.innerText=rng.boundingLeft;   
       bt.innerText=rng.boundingTop;   
       bw.innerText=rng.boundingWidth;   
       ot.innerText=rng.offsetTop;   
       ol.innerText=rng.offsetLeft;   
       t.innerText=rng.text;   
       }   
      
       function selectText(sp,ep)   
       {   
       sp=parseInt(sp)   
       ep=parseInt(ep)   
       if(isNaN(sp)||isNaN(ep))   
       return;   
       var rng= document.body.createTextRange();
       rng.moveToElementText(box)   
       rng.moveEnd("character",-box.innerHTML.length)   
       rng.moveStart("character",box.innerHTML.length)   
       rng.collapse(true);   
       rng.moveEnd("character",ep)   
       rng.moveStart("character",sp)   
       rng.select();   
       returnCase(rng);   
       } 
       window.onload=function(){  
       var rg=document.body.createTextRange(); 
       rg.moveToElementText(box)
       }  
       function findText(tw)   
       {   
       if(tw=="")   
       return;   
       var sw=0;   
       if(document.selection)   
       {   
       sw=document.selection.createRange().text.length;   
       }   
       rg.moveEnd("character",box.innerHTML.length);   
       rg.moveStart("character",sw);   
      
       if(rg.findText(tw))   
       {   
       rg.select();   
       returnCase(rg);   
       }   
       if(rg.text!=tw)   
       {   
       alert("已经搜索完了");  
       rg=document.body.createTextRange(); 
       rg.moveToElementText(box)  
       }   
       }   
       </script>   
       </p>   
       <p></p>   
       光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置">   
       <p></p>   
       选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择">   
       <p></p>   
       选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择">   
       </td>   
       <td width="217">boundingHeight:&nbsp;<span id="bh"></span></td>   
       </tr>   
       <tr>   
       <td width="217">boundingWidth:&nbsp;<span id="bw"></span></td>   
       </tr>   
       <tr>   
       <td width="217">boundingTop:&nbsp;<span id="bt"></span></td>   
       </tr>   
       <tr>   
       <td width="217">boundingLeft:&nbsp;<span id="bl"></span></td>   
       </tr>   
       <tr>   
       <td width="217">offsetLeft:&nbsp;<span id="ol"></span> </td>   
       </tr>   
       <tr>   
       <td width="217">offsetTop:&nbsp;<span id="ot"></span> </td>   
       </tr>   
       <tr>   
       <td width="217">text:&nbsp;<span style="position: absolute; z-index: 10" id="t"></span> </td>   
       </tr>   
       </table>  
       <div contentEditable="true"  id="box" onclick=tellPoint(this)>  
    1. 入库作业、出库作业、清点作业等功能操作允许多单并行操作，即根据调拨单据号或清点单据号可接收多个作业单据，通过选择不同的作业单据进行实际操作。 
       </div>    
       </body>   
       </html>