24秒

全力以赴争取每个24秒……

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: 订阅 订阅 :: 管理 ::
先说说TextRange      的常用方法   
    
     collapse([bStart])   
     移动Range的插入点   
     bStart      true(移到开头)      false(移到末尾)   
    
     findText(sText      [,      iSearchScope]      [,      iFlags])   
     在Range中查找sText   
     iSearchScope      开始位置,负数方向搜索   
     iFlags      2(整词匹配)      4(区别大小写)   
    
     moveStart(sUnit      [,      iCount])   
     moveEnd(sUnit      [,      iCount])   
     移动Range的开头或结尾   
     sUnit      character(字)      word(词)      sentence(句)      textedit(Range)   
     iCount      移动数量,默认为1   
    
     moveToPoint(iX,      iY)   
     移动光标到坐标(iX,iY)   
    
     pasteHTML(sHTMLText)   
     替换Range中的html   
    
     scrollIntoView([bAlignToTop])   
     滚动使之在当前窗口显示   
     bAlignToTop      true(Range在窗口开头)      false(Range在窗口底部)   
    
     select()   
     选中Range   
    
     然后讲一些例子,大家也可以帮忙汇总一下,找帖子不好找,呵呵   
    
     设置光标(qiushuiwuhen)   
     ====================================   
     <textarea      id=demo      cols=50      rows=5>关于光标定位的补充.abcdefghijklmnopqrstuvwxyz</textarea>   
     <br><input      type=checkbox      id=collapse>倒数      第<input      id=s      value=4      size=4>位      <input      value="设置光标"      type=button      onclick=setCursor()>   
     <script>   
     function      setCursor(){   
             var      num=parseInt(document.all.s.value)   
     range=document.all.demo.createTextRange();     
     if(document.all.collapse.checked){   
     range.collapse(false);     
     range.moveEnd('character',-1*num);     
     }else{   
     range.collapse(true);     
     range.moveStart('character',-1+num);     
     }   
     range.select();   
     }   
     </script>   
     =====================================   
    
     设置文本选择(qiushuiwuhen)   
     ==========================================   
     <div      id=demo>关于光标定位的补充.abcdefghijklmnopqrstuvwxyz</div>   
     <br>从正数<input      id=b      value=4      size=4>      到      倒数第<input      id=s      value=4      size=4>位      <input      value="设置文本选择"      type=button      onclick=setSelect()>   
     <script>   
     function      setSelect(){var      range      =      document.body.createTextRange();   
     range.moveToElementText(demo)   
     range.moveEnd('character',-1*parseInt(document.all.s.value));     
     range.moveStart('character',-1+parseInt(document.all.b.value));     
     range.select();   
     }   
     </script>   
     ================================================================   
    
    
     取得当前坐标系列1(qiushuiwuhen)   
     =====================================   
     <textarea      id=show      rows=10      cols=100>   
     先将光标置在这里任意处,然后点击按钮,看光标变化   
     </textarea>   
     <br><input      type=button      value=取得当前坐标      onclick='window.status=GetCursorPos()'>   
     <script>   
     function      GetCursorPos(oTextArea)     
     {     
     s="~!@#$%^";   
     clipboardData.setData('text',s);     
     show.focus();     
     document.execCommand('paste');     
     var      arr=show.value.split(s);     
     show.value=arr[1];   
     show.document.selection.empty();   
     show.document.selection.createRange().select();   
     show.focus();   
     clipboardData.setData('text',arr[0]);     
     document.execCommand('paste');     
     return      arr[0].length;     
     }   
     </script>   
     ========================================

取得当前坐标系列2(色眯眯的小疯狗)   
    ===============================   
    <textarea     rows=10     cols=100     onclick="getCursorPosition()">   
    北京时间10月6日,世界三大通讯社之一的法新社刊发图文报道,中国国脚孙继海因为在最近的世界杯预选赛中的表现,已经吸引了意大利俱乐部AC米兰和都灵队的争购。中国队只需在10月7日同阿曼队的比赛中战平就将首次进入世界杯决赛圈。图为孙继海(右)1998年12月19日在亚洲杯上的资料图片。</textarea>   
    <script     language=JScript>   
    function     getCursorPosition(){   
    var     src     =     event.srcElement   
    var     oTR     =     src.createTextRange()   
    var     textLength     =     src.innerText.length   
    var     line,     char,     total,     cl   
    oTR.moveToPoint(window.event.x,     window.event.y)   
    oTR.moveStart("character",     -1*textLength)   
    cl     =     oTR.getClientRects()   
    line     =     cl.length   
    total     =     oTR.text.length   
    oTR.moveToPoint(cl[cl.length-1].left-2,     cl[cl.length-1].top-2)   
    oTR.moveStart("character",     -1*textLength)   
    char     =     total     -     oTR.text.length   
    window.status     =     "行:     "     +     line     +",     列:     "     +     char     +     ",     第     "     +     total     +     "     个字符"   
    }   
    </SCRIPT>   
    =================================   
    
    取得当前坐标系列3(Yang)   
    ================================   
    <textarea     rows=20     cols=80     id=show>   
    Alpha     滤镜     :     线形     <img     src=images/ad.gif     style='filter:     Alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=0,finishx=468,finishy=60)'><br>   
    Alpha     滤镜     :放射状<img     src=images/ad.gif     style='filter:     Alpha(opacity=100,finishopacity=0,style=2,startx=0,starty=0,finishx=468,finishy=60)'><br>   
    Alpha     滤镜     :长方形<img     src=images/ad.gif     style='filter:     Alpha(opacity=100,finishopacity=0,style=3,startx=0,starty=0,finishx=468,finishy=60)'><br>   
    <img     src=images/ad.gif     style='filter:blur(add=ture,direction=135,strength=100)'><br>   
    <img     src=images/ad.gif     style='filter:filph'><br>   
    <img     src=images/ad.gif     style='filter:filpv'><br>   
    <img     src=images/ad.gif     style='filter:chroma(color=white)'><br>   
    <p     style='filter:Dropshadow(color=#ff0080,offx=5,offy=5.positive=0)'>样式表滤镜实例</p><br>   
    <img     src=images/ad.gif     style='filter:glow(color=blue,strength=10)'><br>   
    <img     src=images/ad.gif     style='filter:gray'><br>   
    <img     src=images/ad.gif     style='filter:invert'><br>   
    <img     src=images/ad.gif     style='filter:xray'><br>   
    <img     src=images/ad.gif     style='filter:light'><br>   
    <img     src=images/ad.gif     style='filter:mask(color=white)'><br>   
    <img     src=images/ad.gif     style='filter:shadow(color=red,direction=225)'><br>   
    <img     src=images/ad.gif     style='filter:wave(add=add,freq=2,lightstrength=50,phase=45,strength=10)'><br>   
    <img     src=images/ad.gif     style='filter:wave(add=add,freq=2,lightstrength=30,phase=50,strength=5)'><br>   
    <img     src=images/ad.gif     style='filter:wave(add=add,freq=2,lightstrength=90,phase=25,strength=5)'><br>   
    <img     src=images/ad.gif     style=''><br>   
    </textarea>   
    <input     type=button     value=运行代码     onclick=window.open().document.writeln(show.value)>   
    <input     type=button     value=取得当前坐标     onclick='window.status=GetCursorPos(show)'>   
    <script>   
    function     GetCursorPos(oTextArea)     
    {     
    s="~!@#$%^";   
    clipboardData.setData('text',s);     
    oTextArea.focus();     
    document.execCommand('paste');     
    var     ret=oTextArea.value.indexOf(s);     
    document.execCommand('undo');     
    return     ret;     
    }   
    </script>   
    =================================   
    
    
    取得当前坐标系列4(qiushuiwuhen)   
    ====================================   
    <textarea     id=demo     cols=50>   
    中文abcdefghijklmnopqrstuvwxyz   
    </textarea>   
    <br><input     type=button     onclick=get(demo)     value=get>   
    <script>   
    function     get(oTextarea){   
    var     qswh="@#%#^&#*$"   
    oTextarea.focus();   
    rng=document.selection.createRange();   
    rng.text=qswh;   
    var     tmp=oTextarea.value.indexOf(qswh)   
    rng.moveStart("character",     -qswh.length)   
    rng.text="";   
    alert(tmp);   
    }   
    </script>   
    =========================================   
    
    取得当前坐标系列5(色眯眯的小疯狗)   
    ===========================================   
    <textarea     rows=10     cols=100     onclick="getCursorPosition()"     onkeyup="getCursorPosition()">   
    北京时间10月6日,世界三大通讯社之一的法新社刊发图文报道,中国国脚孙继海因为在最近的世界杯预选赛中的表现,已经吸引了意大利俱乐部AC米兰和都灵队的争购。中国队只需在10月7日同阿曼队的比赛中战平就将首次进入世界杯决赛圈。图为孙继海(右)1998年12月19日在亚洲杯上的资料图片。</textarea>   
    <script     language=JScript>   
    function     getCursorPosition(){   
    var     src     =     event.srcElement   
    var     oTR     =     src.createTextRange()   
    var     oSel     =     document.selection.createRange()   
    var     textLength     =     src.innerText.length   
    var     line,     char,     total,     cl   
    oTR.moveToPoint(oSel.offsetLeft,     oSel.offsetTop)   
    oTR.moveStart("character",     -1*textLength)   
    cl     =     oTR.getClientRects()   
    line     =     cl.length   
    total     =     oTR.text.length   
    oTR.moveToPoint(cl[cl.length-1].left,     cl[cl.length-1].top)   
    oTR.moveStart("character",     -1*textLength)   
    char     =     total     -     oTR.text.length   
    if     (oSel.offsetTop     !=     cl[cl.length-1].top)     {line++;     char     =     0}   
    else     if     (src.createTextRange().text.substr(oTR.text.length,     2)     ==     "\r\n")     char     -=     2   
    window.status     =     "行:     "     +     line     +",     列:     "     +     char     +     ",     第     "     +     total     +     "     个字符"   
    }   
    </SCRIPT>   
    =========================================   
    
    取得当前坐标系列6(qiushuiwuhen)   
    ============================   
    <textarea     id=demo     cols=50>   
    中文abcdefghijklmnopqrstuvwxyz</textarea>   
    <br><input     type=button     value=getPos     onclick=getPos(demo)>   
    <script>   
    function     getPos(obj){   
            obj.focus();ml=obj.value.length;l=0;   
    rng=document.selection.createRange();   
    rng.moveEnd("character",ml);   
    try{l=ml-rng.htmlText.match(/>((.|\n)+)<\/textarea>/i)[1].length}catch(e){}   
    alert(l)   
    }   
    </script>   
    ==============================   
    
    获取光标位置系列7(flashsoft)   
    ==================================   
    <body><div     id=box>点击textarea</div>     
    <script>   
    function     doit(){   
            var     rng     =     event.srcElement.createTextRange();   
    rng.moveToPoint(event.x,event.y);   
    rng.moveEnd("character",event.srcElement.value.length)   
    box.innerText     =     "光标位置:"     +     (event.srcElement.value.length     -     rng.text.length)   
    }   
    </script><textarea     onclick=doit()     rows="6"     cols="33">sdfsdfsdfsdfsdfsdfsdf</textarea></body> 

获取光标位置系列8(flashsoft)   
   ================================   
    
   <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">   
   点击    TextArea    实现光标定位                                                                           
                                                                            
   <p>                                                                           
   <textarea    rows="7"    cols="49"    id="box"    onclick=tellPoint()>我怕来不及我要抱着你,直到感觉你的绉纹有了岁月的痕迹,直到视线变得模糊直到不能呼吸   
   为了你我愿意   
   动也不能动也要看着你,直到感觉你的发线有了白雪的痕迹,直到肯定你是真的直到失去力气让我们形影不离   
   如果全世界我也可以放弃,至少还有你值得我去珍惜而你在这里就是生命的奇迹   
   也许全世界我也可以忘记,就是不愿意失去你的消息你掌心的痣我总记得在哪里   
   我们好不容易我们身不由已,我怕时间太快不够将你看仔细,我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离   
   </textarea>                 
              
   <script>             
              
   function    movePoint()             
   {             
   var    pn    =    parseInt(pnum.value);             
              
   if(isNaN(pn))             
   return;             
              
   var    rng    =    box.createTextRange();     
              
   rng.moveStart("character",pn);             
              
   rng.collapse(true);             
              
   rng.select();             
              
   returnCase(rng)             
              
   }             
              
   function    tellPoint()             
   {             
   var    rng    =    event.srcElement.createTextRange();   
              
   rng.moveToPoint(event.x,event.y);             
   rng.moveStart("character",-event.srcElement.value.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    =    box.createTextRange();             
              
   rng.moveEnd("character",-box.value.length)             
   rng.moveStart("character",-box.value.length)             
              
   rng.collapse(true);             
              
   rng.moveEnd("character",ep)             
   rng.moveStart("character",sp)             
              
   rng.select();             
              
   returnCase(rng);             
   }             
    
   var    rg    =    box.createTextRange();   
              
   function    findText(tw)             
   {             
   if(tw=="")             
   return;                   
              
   var    sw    =    0;             
              
   if(document.selection)             
   {             
   sw    =    document.selection.createRange().text.length;             
   }             
              
   rg.moveEnd("character",box.value.length);             
              
   rg.moveStart("character",sw);             
    
              
   if(rg.findText(tw))             
   {             
   rg.select();     
    
   returnCase(rg);         
   }   
    
   if(rg.text!=tw)   
   {   
   alert("已经搜索完了")   
   rg    =    box.createTextRange()   
                   }   
              
   }             
              
   </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>                                                               
   </body>                                                                           
                                                                            
   </html>                                                                           
   =================================   
    
   今天又看到一种   
   =========================================   
   <textarea    id=demo    cols=50>   
   中文abcdefghijklmnopqrstuvwxyz</textarea>   
   <br><input    type=button    value=getPos    onclick=getPos(demo)>   
   <script>   
   function    getPos(obj){   
     obj.focus();   
     var    workRange=document.selection.createRange();   
     obj.select();   
     var    allRange=document.selection.createRange();   
     workRange.setEndPoint("StartToStart",allRange);   
     var    len=workRange.text.length;   
     workRange.collapse(false);   
     workRange.select();   
     alert(len);   
   }   
   </script>   

posted on 2010-01-22 16:32  bignjl  阅读(2743)  评论(0编辑  收藏  举报