`

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 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" onclick="movePoint()" value="移动光标到指定位置">         
              
选择指定范围:<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择">        
          
选择查找字符 :<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="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>

 

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

//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);   
            }   
    }  

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head><TITLE>xxx</TITLE>
<script language=JavaScript>
//选中行去除一个缩进==============
function selDelTab()
{
    var str=new Array();
    var slct=document.selection.createRange();
    var rng=slct;//【为了保持选区】
    var r1=rng.duplicate();//【为了保持选区】克隆
        
    r1.expand("textedit"); //【为了保持选区】r1扩展到全部编辑区域
    var r2=r1.duplicate();//【为了保持选区】r2也涵盖全部编辑区域
    alert("r2==="+r2.text);

    r1.setEndPoint("EndToStart",rng);//【为了保持选区】r1的开始端不动,r1的结尾放到rng的开始
    alert("r1=="+r1.text);
    r2.setEndPoint("StartToEnd",rng);//【为了保持选区】r1的结尾端不动,r2的开始放到rng的结尾
    var str=slct.text.split("\n");
    var tmp='';
    for(i=0;i<str.length;i++)
    {
    tmp=tmp + str[i].replace(/^\t(.*)/,'$1') + '\n';
    }
    slct.text=tmp.replace(/[\n\n]$/gm,'');//replace去除空白行
    r1.setEndPoint("StartToStart",r2);//【为了保持选区】r1的结尾端不动,r1的开始放到r2的开始
    r1.select();//【为了保持选区】
}
</script>
</head>
<body >
<div id=edt>
<input id=p1 type=button value=←选中行缩进处理 style="font-size:12px;display:inline" onclick="selDelTab();">
<textarea id=txt rows=22 cols=120 >
        上卷    1
        绪论    1
        世界经济史的研究对象和基本内容    2
        世界经济史的分期    6
        研究世界经济史的意义    13
        第一篇 资本主义生产方式确立世界经济体系形成(16世纪~19世纪60年代)    21
        第一章 西欧封建社会末期资本主义关系的产生和地理大发现    21
        第一节 西欧封建社会末期经济的发展和资本主义关系的出现    21
</textarea>
</div>
</body>
</html>

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  <div   nowrap   CONTENTEDITABLE   onmouseup="getCursorPos();">123456789</div>   
  <script>   
          function   getCursorPos(){   
                  var   pos=-1;   
                  var   sText=document.selection.createRange();
                  alert(sText.text);
                  var   tempText=document.body.createTextRange();;   
                  sText.select();   
                  tempText.setEndPoint("EndToStart",sText);   
                  pos=tempText.text.length;   
                  alert(pos);   
          }   
  </script>
 </BODY>
</HTML>

 

 

理解setEndPoint方法

今天在修改控件时,使用到了setEndPoint方法,查找了MSDN,自己测试了一下,总结了该方法的使用,供大家分享。
MSDN
上的解释是:

Sets the endpoint of one range based on the endpoint of another range.

表面意思是:在另一个rangeendpoint基础上设置某个rangeendpoint.

基本概念:

A text range has two endpoints: one at the beginning of the text range and one at the end. An endpoint can also be the position between two characters in an HTML document.

一个text range包含两个endpoints,一个在text range的开头,另一个在text range的末尾。一个endpoint也可以在HTML文档的两个字符之间。

Syntax:

TextRange.setEndPoint(sType, oTextRange)

Parameters

sType

Required. String that specifies the endpoint to transfer using one of the following values.

StartToEnd

Move the start of the TextRange object to the end of the specified oTextRange parameter.

StartToStart

Move the start of the TextRange object to the start of the specified oTextRange parameter.

EndToStart

Move the end of the TextRange object to the start of the specified oTextRange parameter.

EndToEnd

Move the end of the TextRange object to the end of the specified oTextRange parameter.

oTextRange

Required. TextRange object from which the source endpoint is to be taken.

Return Value

No return value.

举例:

//123被选中

var workRange=document.selection.createRange();

var allRange=obj.createTextRange();//obj指代文本框实例

情况一:

workRange.setEndPoint("StartToStart",allRange);

workRange.text => 0123

情况二:

workRange.setEndPoint("EndToStart",allRange);

workRange.text => 0

情况三:

workRange.setEndPoint("StartToEnd",allRange);

workRange.text => 456789

情况四:

workRange.setEndPoint("EndToEnd",allRange);

workRange.text => 123456789

解释:

情况一:

workRange.text初始值为123,两个endpoints分别位于01之间、34之间。我们简称01之间的endpointepStart34之间的endpointepEnd,理解执行结果的核心是理解workRange.setEndPoint方法的第一个参数。同时,我们需要理解的一点就是allRange也存在两个endpoints,分别位于0之前、9之后。我们简称这两个endpoints分别为allRange_epStartallRange_epEnd

StartToStart英文解释是:Move the start of the TextRange object to the end of the specified oTextRange parameter.

在本例中,也就是指:将workRangeepStart移动到allRangeallRange_epStart,那么workRange的文本变为allRange_epStartepEnd范围之间。AllRange_epStart成为了workRangeepStart。情况二、三、四的解释类似,就不啰唆了。



 

分享到:
评论

相关推荐

    AM ESB.rar-CSS.rar-DHtml.rar-Ibatis.rar-Spring.rar

    学习DHtml需要理解DOM(Document Object Model)操作、事件处理、Ajax异步通信等技术。 Ibatis.rar文件可能包含Ibatis框架的教程、源码分析和示例项目,帮助开发者了解如何将SQL语句与Java代码解耦,实现数据访问的...

    JavaScript.css And.DHTML.ra

    CSS, DHTML and JavaScript.rar JavaScript.And.DHTML.Cookbook.2003-CHM.chm html & javascript for visual learners tutorial.pdf JavaScript Examples Bible.pdf JavaScript.in.10.Steps.or.Less.eBook-KB.rar

    dhtml-html-css-javascript-dom帮助文档(.chm)五合一

    “dhtml-html-css-javascript-dom帮助文档(.chm)五合一”这一标题表明这是一个综合性的技术文档资源,包含了五个关键领域的知识:Dynamic HTML (DHTML)、HTML、Cascading Style Sheets (CSS)、JavaScript以及...

    dhtml-suite-for-applications v1.9 最新版

    《深入解析dhtml-suite-for-applications v1.9:打造高效Web应用的前端框架》 在Web开发领域,JavaScript库和框架的运用是构建交互性强、用户体验优良的应用程序的关键。dhtml-suite-for-applications v1.9正是这样...

    DHTML 手册--------HTML,JAVASCRIPT深入解析

    2. DOM操作:讲解如何使用JavaScript来操作DOM(Document Object Model),包括获取元素、修改元素内容、添加或删除元素,以及事件处理。 3. BOM处理:Browser Object Model允许JavaScript操作浏览器窗口,如改变...

    DHTML5-客户端JavaScript.ppt

    JavaScript是一种广泛应用于客户端Web开发的脚本语言,它在DHTML5中扮演着核心角色。JavaScript与Java、Jscript和js之间虽然名字相似,但它们是完全不同的技术。Java是一种面向对象的、编译型的编程语言,而...

    VBScript-JavaScript-Dhtml-SQl-WSH-DOM-XML-CSS-ASp._VBScript HTML

    VBScript JavaScript Dhtml SQL WSH DOM XML CSS ASp等12个参考手册

    DHTML手册-asp编程手册

    **DHTML(Dynamic HTML)**是HTML的一种增强形式,它通过结合CSS、JavaScript和DOM(Document Object Model)来实现网页的动态效果。DHTML允许开发者创建交互式和动感的网页,无需刷新页面就能更新内容。CSS控制页面...

    DHTML 手册--网页制作完全手册

    DHTML 手册 网页制作完全手册 一个很好的辅助工具

    DHtml.rar_DHTML_VC DHTML_visual c

    标题"DHtml.rar_DHTML_VC DHTML_visual c"和描述"DHTML programing with VC to enhance GUI"涉及的关键知识点是使用Visual C++(VC)进行DHTML(动态超文本标记语言)编程,以提升图形用户界面(GUI)的功能和交互性...

    大优惠dhtml-html-css-javascript-dom帮助文档五合一

    DHTML完全手册.chm CSS + JS合订版手册.chm 。。。 这些是我从事前端开发这么多年来的积蓄啊,都贡献出来啦!各有各的好处,各个互补十分齐全。 【备注】如果你想转APP跨平台开发,那么这些也都是基础的。因为...

    动态网页全接触:DHTML-JavaScript.rar

    2. **CSS样式表(Cascading Style Sheets)**:DHTML利用CSS实现了元素的动态样式变化,如位置、颜色、大小等。 3. **脚本语言**:主要是JavaScript,用于处理用户交互、响应事件、修改DOM以及与服务器通信。 4. *...

    DHTML.chm

    DHTML是HTML、CSS、JavaScript以及DOM(Document Object Model)等技术的结合,它使得网页能够实现动态交互效果,如页面元素的动态更新、动画效果以及用户与网页的互动。 在压缩包中,我们只有一个文件——“DHTML....

    DHTML.rar_DHTML

    例如,通过`document.getElementById()`或`document.createElement()`等方法,可以实现元素的选择、创建和删除。 4. **DOM(文档对象模型)** DOM是HTML和XML文档的一种标准表示方式,它将文档结构转换为树形结构...

    dhtml手册-html编程基础必备

    dhtml编程手册,全面介绍dom元素的属性方法等 。是写js和 css新手 必备的

    DHTML 参考手册 - 颜色表

    DHTML 参考手册 - 颜色表 DHTML 参考手册 - 颜色表 DHTML 参考手册 - 颜色表

Global site tag (gtag.js) - Google Analytics