簡(jiǎn)介

selection是對(duì)當(dāng)前激活選中區(qū)（即高亮文本）進(jìn)行操作。

在非IE瀏覽器（Firefox,、Safari,、Chrome、Opera）下可以使用window.getSelection()獲得selection對(duì)象,，本文講述的是標(biāo)準(zhǔn)的selection操作方法,。文中絕大部分內(nèi)容來(lái)自 https://developer.mozilla.org/en/DOM/Selection

術(shù)語(yǔ)

以下幾個(gè)名詞是英文文檔中的幾個(gè)名詞。

anchor

選中區(qū)域的“起點(diǎn)”,。

focus

選中區(qū)域的“結(jié)束點(diǎn)”,。

range

是一種fragment(HTML片斷)，它包含了節(jié)點(diǎn)或文本節(jié)點(diǎn)的一部分,。一般情況下,，同一時(shí)刻頁(yè)面中只可能有一個(gè)range，也有可能是多個(gè)range（使用Ctrl健進(jìn)行多選,，不過(guò)有的瀏覽器不允許,，例如Chrome）?？梢詮膕election中獲得range對(duì)象,，也可以使用document.createRange()方法獲得。

屬性

anchorNode

返回包含“起點(diǎn)”的節(jié)點(diǎn),。

anchorOffset

“起點(diǎn)”在anchorNode中的偏移量,。

focusNode

返回包含“結(jié)束點(diǎn)”的節(jié)點(diǎn)。

focusOffset

“結(jié)束點(diǎn)”在focusNode中的偏移量,。

isCollapsed

“起點(diǎn)”和“結(jié)束點(diǎn)”是否重合,。

rangeCount

返回selection中包含的range對(duì)象的數(shù)目，一般存在一個(gè)range,，Ctrl健配合使用可以有多個(gè),。

方法

getRangeAt(index)

從當(dāng)前selection對(duì)象中獲得一個(gè)range對(duì)象。
index：參考rangeCount屬性,。
返回：根據(jù)下標(biāo)index返回相應(yīng)的range對(duì)象,。

collapse(parentNode, offset)

將開始點(diǎn)和結(jié)束點(diǎn)合并到指定節(jié)點(diǎn)（parentNode）的相應(yīng)（offset）位置,。
parentNode：焦點(diǎn)（插入符）將會(huì)在此節(jié)點(diǎn)內(nèi)。
offset： 取值范圍應(yīng)當(dāng)是[0, 1, 2, 3, parentNode.childNodes.length],。

• 0：定位到第一個(gè)子節(jié)點(diǎn)前,。
• 1：第二個(gè)子節(jié)點(diǎn)前。
• ……
• childNodes.length-1：最后一個(gè)子節(jié)點(diǎn)前,。
• childNodes.length：最后一個(gè)子節(jié)點(diǎn)后,。

Mozilla官方文檔 中講到取值為0和1，經(jīng)測(cè)試不準(zhǔn)確,。文檔中還有一句不是十分清楚“The document is not modified. If the content is focused and editable, the caret will blink there.”

extend(parentNode, offset)

將“結(jié)束點(diǎn)”移動(dòng)到指定節(jié)點(diǎn)（parentNode）的指定位置（offset）,。
“起點(diǎn)”不會(huì)移動(dòng)，新的selection是從“起點(diǎn)”到“結(jié)束點(diǎn)”的區(qū)域,，與方向無(wú)關(guān)（新的“結(jié)束點(diǎn)”可以在原“起點(diǎn)”的前面）,。
parentNode：焦點(diǎn)將會(huì)在此節(jié)點(diǎn)內(nèi)。
Offset：1,，parentNode的最后,；0，parentNode的最前,。

modify(alter, direction, granularity)

改變焦點(diǎn)的位置,，或擴(kuò)展|縮小selection的大小
alter：改變的方式?！眒ove”,，用于移動(dòng)焦點(diǎn)；”extend”,，用于改變selection,。
direction：移動(dòng)的方向?？蛇x值forward | backword或left | right
granularity：移動(dòng)的單位或尺寸,?？蛇x值,，character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary"。
Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1才會(huì)支持此函數(shù),， 官方文檔：https://developer.mozilla.org/en/DOM/Selection/modify

collapseToStart()

將“結(jié)束點(diǎn)”移動(dòng)到,，selction的“起點(diǎn)”，多個(gè)range時(shí)也是如此,。

collapseToEnd()

將“起點(diǎn)”移動(dòng)到,，selction的“結(jié)束點(diǎn)”，多個(gè)range時(shí)也是如此,。

selectAllChildren(parentNode)

將parentNode的所有后代節(jié)點(diǎn)（parentNode除外）變?yōu)閟election,，頁(yè)面中原來(lái)的selection將被拋棄,。

addRange(range)

將range添加到selection當(dāng)中，所以一個(gè)selection中可以有多個(gè)range,。
注意Chrome不允許同時(shí)存在多個(gè)range,，它的處理方式和Firefox有些不同。

removeRange(range)

從當(dāng)前selection移除range對(duì)象,，返回值undefined,。
Chrome目前沒(méi)有改函數(shù)，即便是在Firefox中如果用自己創(chuàng)建（document.createRange()）的range作為參數(shù)也會(huì)報(bào)錯(cuò),。
如果用oSelction.getRangeAt()取到的,，則不會(huì)報(bào)錯(cuò)。

removeAllRanges()

移除selection中所有的range對(duì)象,，執(zhí)行后anchorNode,、focusNode被設(shè)置為null，不存在任何被選中的內(nèi)容,。

toString()

返回selection的純文本,，不包含標(biāo)簽。

containsNode(aNode, aPartlyContained)

判斷一個(gè)節(jié)點(diǎn)是否是selction的一部分,。
aNode：要驗(yàn)證的節(jié)點(diǎn),。
aPartlyContained：true，只要aNode有一部分屬于selection就返回true,；false,，aNode必須全部屬于selection時(shí)才返回true。

document.activeElement

該屬性屬于HTML5中的一部分,，它返回當(dāng)前獲得焦點(diǎn)的元素,，如果不存在則返回“body”。一般情況下返回的是“文本域”或“文本框”,。也有可能返回“下拉列表”,、“按鈕”、“單選”或“多選按鈕”等等,，Mac OS系統(tǒng)中可能不會(huì)返回非輸入性元素（textbox,，例如文本框、文本域）,。

相關(guān)屬性和方法：

selectionStart

輸入性元素selection起點(diǎn)的位置,，可讀寫。

selectionEnd

輸入性元素selection結(jié)束點(diǎn)的位置,，可讀寫,。

setSelectionRange(start, end)

設(shè)置輸入性元素selectionStart和selectionEnd值

• 如果textbox沒(méi)有selection時(shí)，selectionStart和selectionEnd相等,，都是焦點(diǎn)的位置,。
• 在使用setSelectionRange()時(shí)
  如果end小于start,，會(huì)講selectionStart和selectionEnd都設(shè)置為end；
  如果start和end參數(shù)大于textbox內(nèi)容的長(zhǎng)度（textbox.value.length）,，start和end都會(huì)設(shè)置為value屬性的長(zhǎng)度,。
• 值得一提的是selectionStart和selectionEnd會(huì)記錄元素最后一次selection的相關(guān)屬性，意思就是當(dāng)元素失去焦點(diǎn)后,，使用selectionStart和selectionEnd仍能夠獲取到元素失去焦點(diǎn)時(shí)的值,。這個(gè)特性可能會(huì)對(duì)制作“插入表情”時(shí)十分有用（將表情插入到元素最后一次焦點(diǎn)的位置）。

<textarea id="textbox">abc中國(guó)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中國(guó)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>

支護(hù)性：ie6\7\8不支持,；Chrome,、Firefox、Opera,、Safari都支持,。

參考文檔：https://developer.mozilla.org/en/DOM/document.activeElement

document.designMode = 'on';

當(dāng)document.designMode = 'on'時(shí)selection的方法、selectionStart,、selectionEnd在Firefox和Opera中不可以使用,，但Chrome和Safari可以。