document.selection 的作用：获取选中然后进行相关操作

最新推荐文章于 2024-05-29 17:37:28 发布

cui_angel

最新推荐文章于 2024-05-29 17:37:28 发布

阅读量3.4w

点赞数 3

分类专栏： JavaScript Web 文章标签： character function input javascript button html

Web 同时被 2 个专栏收录

109 篇文章 1 订阅

订阅专栏

JavaScript

101 篇文章 1 订阅

订阅专栏

转：http://qingfeng825.iteye.com/blog/259099

一、document.selection 介绍

document.selection 表示当前网页中的选中内容。

方法有：

    clear　清除选中的内容
    empty　取消选中
    createRange　返回 TextRange 或 ControlRange 对象
    createRangeCollection 不支持

属性有：

    type　选中内容的类型
    typeDetail 不支持

二、document.selection.createRange()详细介绍

     document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回ControlRange 对象。

配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

例子：
Html代码收藏代码

<!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>  
        <title>document.selection 的 createRange</title>  
    </head>  
    <body>  
      
      <div>请选中这里的部分文字。</div>  
      <div><input type="button" value="加粗" οnclick="javascript:Bold();" /></div>  
    <script type="text/javascript" language="javascript">  
    <!--  
    function Bold()  
    {  
        var r = document.selection.createRange();  
        r.execCommand("Bold");  
    }  
    -->  
    </script>  
      
    </body>  
    </html>

三、光标定位的例
Html代码收藏代码

 <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 实现光标定位           
               
    <textarea rows="7" cols="49" id="box" οnclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸   
    为了你我愿意   
    动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离   
    如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹   
    也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里   
    我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离   
    </textarea>          
    <script language="javascript">   
    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>         
               


               
    光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" οnclick="movePoint()" value="移动光标到指定位置">        
                 
    选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" οnclick="selectText(sbox.value,ebox.value)" value="选择">       
             
    选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" οnclick="findText(cbox.value)" value="查找下一个并选择">        
             
        </td>            
        <td width="217">boundingHeight: <span id="bh"></span></td>            
      </tr>            
      <tr>            
        <td width="217">boundingWidth: <span id="bw"></span></td>            
      </tr>            
      <tr>            
        <td width="217">boundingTop: <span id="bt"></span></td>            
      </tr>            
      <tr>            
        <td width="217">boundingLeft: <span id="bl"></span></td>            
      </tr>            
      <tr>            
        <td width="217">offsetLeft: <span id="ol"></span> </td>            
      </tr>            
      <tr>            
        <td width="217">offsetTop: <span id="ot"></span> </td>            
      </tr>            
      <tr>            
        <td width="217">text: <span style="position: absolute; z-index: 10" id="t"></span> </td>            
      </tr>            
    </table>            
    </body>           
               
    </html>  











四、项目中用到的光标定位 

Js代码  收藏代码         //obj：要设置的对象   num：把光标设在那个位置  
     function   setFocus(obj,num)     
      {     
            var   rng=obj.createTextRange();     
            rng.moveStart("character",   num);     
            rng.collapse(true);     
            rng.select();     
      }   
    //改变当前页面的焦点  
    function  updateCurrentPageFocus(){  
        //如果是合订书名  
        var obj;  
        <c:if test="${indexingBean.isBound==0}">  
                obj=document.indexform.firstBookName;  
        </c:if>  
        <c:if test="${indexingBean.isBound==1}">  
                obj=document.indexform.boundBookName;  
        </c:if>  
          if(StringUtils.isBlank(obj.value)){  
              setFocus(obj,0);  
            }else{  
                  setFocus(obj,obj.value.length);  
                }  
        }

cui_angel

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
7
评论
document.selection 的作用：获取选中然后进行相关操作

转：http://qingfeng825.iteye.com/blog/259099 一、document.selection 介绍 document.selection 表示当前网页中的选中内容。方法有： clear　清除选中的内容 empty　取消选中 createRange　返回 TextRange 或 ControlRa
复制链接

扫一扫

专栏目录