如何实现TextArea中的光标定位？

就指定index,光标就自动移到该index字符。
另外，如何实现搜索字符，TextArea中如果找到的话就选中。
比较急，最好有示例！

解决方案 »

  1.   


    1.<html>    
    2.<head>    
    3.<meta http-equiv="Content-Type" content="text/html; charset=gb2312">    
    4.<meta name="GENERATOR" content="Microsoft FrontPage 4.0">    
    5.<meta name="ProgId" content="FrontPage.Editor.Document">    
    6.<title>光标位置</title>    
    7.<style>    
    8.INPUT{border: 1 solid #000000}    
    9.BODY,TABLE{font-size: 10pt}    
    10.</style>    
    11.</head>    
    12.<body>    
    13.<table border="0" width="700" cellspacing="0" cellpadding="0">    
    14.  <tr>    
    15.    <td width="479" rowspan="7">    
    16.点击 TextArea 实现光标定位            
    17.            
    18.<textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸    
    19.为了你我愿意    
    20.动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离    
    21.如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹    
    22.也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里    
    23.我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离    
    24.</textarea>           
    25.<script language="javascript">    
    26.function movePoint()         
    27.{         
    28. var pn = parseInt(pnum.value);         
    29. if(isNaN(pn))         
    30.  return;         
    31. var rng = box.createTextRange();     
    32. rng.moveStart("character",pn);         
    33. rng.collapse(true);          
    34. rng.select();         
    35. returnCase(rng)          
    36.}         
    37.function tellPoint()         
    38.{         
    39. var rng = event.srcElement.createTextRange();     
    40. rng.moveToPoint(event.x,event.y);          
    41. rng.moveStart("character",-event.srcElement.value.length)          
    42. pnum.value = rng.text.length         
    43. returnCase(rng)         
    44.}         
    45.         
    46.function returnCase(rng)         
    47.{         
    48. bh.innerText = rng.boundingHeight;         
    49. bl.innerText = rng.boundingLeft;         
    50. bt.innerText = rng.boundingTop;         
    51. bw.innerText = rng.boundingWidth;         
    52. ot.innerText = rng.offsetTop;         
    53. ol.innerText = rng.offsetLeft;         
    54. t.innerText  = rng.text;         
    55.}         
    56.         
    57.function selectText(sp,ep)         
    58.{         
    59. sp = parseInt(sp)         
    60. ep = parseInt(ep)         
    61. if(isNaN(sp)||isNaN(ep))         
    62.  return;         
    63. var rng = box.createTextRange();         
    64. rng.moveEnd("character",-box.value.length)         
    65. rng.moveStart("character",-box.value.length)         
    66. rng.collapse(true);         
    67. rng.moveEnd("character",ep)         
    68. rng.moveStart("character",sp)         
    69. rng.select();         
    70. returnCase(rng);         
    71.}         
    72.var rg = box.createTextRange();    
    73.function findText(tw)         
    74.{         
    75. if(tw=="")         
    76.  return;     
    77. var sw = 0;         
    78. if(document.selection)         
    79. {         
    80.  sw = document.selection.createRange().text.length;         
    81. }          
    82. rg.moveEnd("character",box.value.length);         
    83. rg.moveStart("character",sw);         
    84. if(rg.findText(tw))          
    85. {         
    86.  rg.select();     
    87.  returnCase(rg);        
    88. }     
    89.     
    90. if(rg.text!=tw)    
    91. {    
    92.  alert("已经搜索完了")    
    93.  rg = box.createTextRange()    
    94. }    
    95.           
    96.}         
    97.         
    98.</script>          
    99.            
    100.            
    101.光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置">         
    102.              
    103.选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择">        
    104.          
    105.选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择">         
    106.          
    107.    </td>             
    108.    <td width="217">boundingHeight: <span id="bh"></span></td>             
    109.  </tr>             
    110.  <tr>             
    111.    <td width="217">boundingWidth: <span id="bw"></span></td>             
    112.  </tr>             
    113.  <tr>             
    114.    <td width="217">boundingTop: <span id="bt"></span></td>             
    115.  </tr>             
    116.  <tr>             
    117.    <td width="217">boundingLeft: <span id="bl"></span></td>             
    118.  </tr>             
    119.  <tr>             
    120.    <td width="217">offsetLeft: <span id="ol"></span> </td>             
    121.  </tr>             
    122.  <tr>             
    123.    <td width="217">offsetTop: <span id="ot"></span> </td>             
    124.  </tr>             
    125.  <tr>             
    126.    <td width="217">text: <span style="position: absolute; z-index: 10" id="t"></span> </td>             
    127.  </tr>             
    128.</table>             
    129.</body>            
    130.            
    131.</html>
      

  2.   

    相当的强大先标记，虽然我很久没搞web 了O.O