日期:2014-05-17  浏览次数:20861 次

DHTML之-----document.selection 的 createRange

一、document.selection 介绍

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

方法有:

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

属性有:

?

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

?

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

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

配合 execCommand,在 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="加粗" onclick="javascript:Bold();" /></div>  
<script type="text/javascript" language="javascript">  
<!--   
function Bold()   
{   
    var r = document.selection.createRange();   
    r.execCommand("Bold");   
}   
-->  
</script>  
  
</body>  
</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" onclick=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