代码改变世界

JavaScript标准Selection操作,对页面文件选取操作

2014-07-01 16:52  臭小子1983  阅读(2388)  评论(0编辑  收藏  举报

一、简介

  selection是对当前激活选中区(即高亮文本)进行操作。

  在非IE浏览器(Firefox、Safari、Chrome、Opera)下可以使用window.getSelection()获得selection对象,本文讲述的是标准的selection操作方法。文中绝大部分内容来自 https://developer.mozilla.org/en/DOM/Selection

 

二、术语

以下几个名词是英文文档中的几个名词。

1、anchor:选中区域的“起点”。

2、focus:选中区域的“结束点”。

3、range:是一种fragment(HTML片断),它包含了节点或文本节点的一部分。一般情况下,同一时刻页面中只可能有一个range,也有可能是多个range(使用Ctrl健进行多选,不过有的浏览器不允许,例如Chrome)。可以从selection中获得range对象,也可以使用document.createRange()方法获得。

 

三、属性

1、anchorNode:返回包含“起点”的节点。

2、anchorOffset:“起点”在anchorNode中的偏移量。

3、focusNode:返回包含“结束点”的节点。

4、focusOffset:“结束点”在focusNode中的偏移量。

5、isCollapsed:“起点”和“结束点”是否重合。

6、rangeCount:返回selection中包含的range对象的数目,一般存在一个range,Ctrl健配合使用可以有多个。

 

四、方法

1、getRangeAt(index):从当前selection对象中获得一个range对象。

index:参考rangeCount属性。
返回:根据下标index返回相应的range对象。

 

2、collapse(parentNode, offset):将开始点和结束点合并到指定节点(parentNode)的相应(offset)位置。

parentNode:焦点(插入符)将会在此节点内。
offset: 取值范围应当是[0, 1, 2, 3, parentNode.childNodes.length]。

    • 0:定位到第一个子节点前。
    • 1:第二个子节点前。
    • ……
    • childNodes.length-1:最后一个子节点前。
    • childNodes.length:最后一个子节点后。

Mozilla官方文档 中讲到取值为0和1,经测试不准确。文档中还有一句不是十分清楚“The document is not modified. If the content is focused and editable, the caret will blink there.”

 

3:extend(parentNode, offset)

将“结束点”移动到指定节点(parentNode)的指定位置(offset)。
“起点”不会移动,新的selection是从“起点”到“结束点”的区域,与方向无关(新的“结束点”可以在原“起点”的前面)。
parentNode:焦点将会在此节点内。
Offset:1,parentNode的最后;0,parentNode的最前。

 

4、modify(alter, direction, granularity)

改变焦点的位置,或扩展|缩小selection的大小
alter:改变的方式。”move”,用于移动焦点;”extend”,用于改变selection。
direction:移动的方向。可选值forward | backword或left | right
granularity:移动的单位或尺寸。可选值,character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary"。
Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1才会支持此函数, 官方文档:https://developer.mozilla.org/en/DOM/Selection/modify

 

5、collapseToStart():将“结束点”移动到,selction的“起点”,多个range时也是如此。

6、collapseToEnd():将“起点”移动到,selction的“结束点”,多个range时也是如此。

7、selectAllChildren(parentNode):将parentNode的所有后代节点(parentNode除外)变为selection,页面中原来的selection将被抛弃。

8、apRange(range)

将range添加到selection当中,所以一个selection中可以有多个range。
注意Chrome不允许同时存在多个range,它的处理方式和Firefox有些不同。

 

9、removeRange(range)

从当前selection移除range对象,返回值undefined。
Chrome目前没有改函数,即便是在Firefox中如果用自己创建(document.createRange())的range作为参数也会报错。
如果用oSelction.getRangeAt()取到的,则不会报错。

 

10、removeAllRanges():移除selection中所有的range对象,执行后anchorNode、focusNode被设置为null,不存在任何被选中的内容。

 

11、toString():返回selection的纯文本,不包含标签。

 

12、containsNode(aNode, aPartlyContained)

判断一个节点是否是selction的一部分。
aNode:要验证的节点。
aPartlyContained:true,只要aNode有一部分属于selection就返回true;false,aNode必须全部属于selection时才返回true。

 

五、document.activeElement

  该属性属于HTML5中的一部分,它返回当前获得焦点的元素,如果不存在则返回“body”。一般情况下返回的是“文本域”或“文本框”。也有可能返回“下拉列表”、“按钮”、“单选”或“多选按钮”等等,Mac OS系统中可能不会返回非输入性元素(textbox,例如文本框、文本域)。

相关属性和方法:

1、selectionStart:输入性元素selection起点的位置,可读写。

2、selectionEnd:输入性元素selection结束点的位置,可读写。

3、setSelectionRange(start, end)

设置输入性元素selectionStart和selectionEnd值

    • 如果textbox没有selection时,selectionStart和selectionEnd相等,都是焦点的位置。
    • 在使用setSelectionRange()时
      如果end小于start,会讲selectionStart和selectionEnd都设置为end;
      如果start和end参数大于textbox内容的长度(textbox.value.length),start和end都会设置为value属性的长度。
    • 值得一提的是selectionStart和selectionEnd会记录元素最后一次selection的相关属性,意思就是当元素失去焦点后,使用selectionStart和selectionEnd仍能够获取到元素失去焦点时的值。这个特性可能会对制作“插入表情”时十分有用(将表情插入到元素最后一次焦点的位置)。
<textarea id="textbox">abc中国efg</textarea>
<script type="text/javascript">
window.onload = function(){
    var textbox = document.getElementById('textbox');
    textbox.setSelectionRange(5, 2);
    console.log(textbox.selectionStart);    // 2
    console.log(textbox.selectionEnd);      // 2
};
</script>
<textarea id="textbox">abc中国efg</textarea>
<script type="text/javascript">
window.onload = function(){
    var textbox = document.getElementById('textbox');
    textbox.setSelectionRange(9, 9);
    console.log(textbox.selectionStart);    // 8
    console.log(textbox.selectionEnd);      // 8
};
</script>

支护性:ie6\7\8不支持;Chrome、Firefox、Opera、Safari都支持。

参考文档:https://developer.mozilla.org/en/DOM/document.activeElement

 

六、document.designMode = 'on';

  当document.designMode = 'on'时selection的方法、selectionStart、selectionEnd在Firefox和Opera中不可以使用,但Chrome和Safari可以。

 例:

 1 <div id="box">
 2     “用泡打粉发酵面食,蒸制的时候显得蓬松可口,看起来也好看。”昨日,闵行区报春路上一个菜场附近的馒头包子铺里,一名来自四川的摊贩说,他和面的时候会加些泡打粉,听说将被禁止使用,显得很吃惊:“以前家家户户做馒头包子不都是添加这个嘛!吃了那么多年的东西难道还会有问题?”不过,这位摊贩也承认,添加泡打粉需适量,一旦加多了和出来的面味道就不好,“吃起来有股化肥味。”随后,记者在淘宝上输入“泡打粉”,发现一种名为“香甜泡打粉”的配料成分中,也有47%为钾明矾(硫酸铝钾)。
 3 </div>
 4 
 5 <script>
 6 
 7     var oBox = getId("box");
 8 
 9     function getId(id){
10         return document.getElementById(id);
11     }
12 
13     function getRangeObject(selectionObject) {
14         if (selectionObject.getRangeAt){
15             return selectionObject.getRangeAt(0);
16         }
17         else { // 较老版本Safari!
18             var range = document.createRange();
19             range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
20             range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
21             return range;
22         }
23     }
24 
25     oBox.onmouseup = function(evt){
26         var userSelection;
27         if (window.getSelection) {                  // 现代浏览器
28             userSelection = window.getSelection();
29         }
30         else if (document.selection) {              // IE浏览器、Chrome 考虑到Opera,应该放在后面
31             userSelection = document.selection.createRange();
32         }
33 
34         var rangeObject = getRangeObject(userSelection);
35 
36         alert(rangeObject);
37     }
38 
39 </script>