document.selection : IE
window.getSelection() ：Chrome、Safari、FireFox
selection代表了當(dāng)前激活選中區(qū)，即高亮文本塊，和/或文檔中用戶可執(zhí)行某些操作的其它元素。
對象的典型用途是作為用戶的輸入，以便識別正在對文檔的哪一部分正在處理，或者作為某一操作的結(jié)果輸出給用戶。
**** 用戶和腳本都可以創(chuàng)建選中區(qū) ****
用戶創(chuàng)建選中區(qū)的辦法是拖曳文檔的一部分。
腳本創(chuàng)建選中區(qū)的辦法是在文本區(qū)域或類似對象上調(diào)用select方法。
要獲取當(dāng)前選中區(qū)，請對document對象應(yīng)用selection關(guān)鍵字。
要對選中區(qū)執(zhí)行操作，請先用createRange方法從選中區(qū)創(chuàng)建一個文本區(qū)域?qū)ο蟆?/p>
一個文檔同一時間只能有一個選中區(qū)。選中區(qū)的類型決定了其中為空或者包含文本和/或元素塊。盡管空的選中區(qū)不包含任何內(nèi)容，你仍然可以用它作為文檔中的位置標(biāo)志。
#以下代碼在IE瀏覽器中生效
// 對選定的文字進(jìn)行加粗
document.selection.createRange().execCommand("Bold")
// 獲取選定的文本
document.selection.createRange().text
// 獲取選定的html
document.selection.createRange().htmlText
// 清除選定的內(nèi)容
document.selection.clear()
// 彈出選擇區(qū)的類型( None,Text,...)
document.selection.type
// 獲取選取區(qū)的文字
var range = document.selection.createRange(); // 創(chuàng)建文本區(qū)域?qū)ο?range.moveStart("character",2); // 選定區(qū)起始點向后移動2個字符
range.moveEnd("character",1); // 選定區(qū)結(jié)束點向后移動1個字符
console.log(range.text)
#以下代碼在chrome/firefox中生效
window.getSelection().rangeCount // 獲取選定區(qū)數(shù)量
window.getSelection().isCollapsed // 選取定區(qū)起始點是否重疊
// 在光標(biāo)處插入圖片
document.execCommand("insertImage","false","https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png")
// 在光標(biāo)處插入html代碼
document.execCommand("insertHTML","false","<br/>")
// 在焦點狀態(tài)下，移動光標(biāo)至第一個字符后面
document.getElementById('txt').select();
document.getElementById('txt').setSelectionRange(1,1)
// 復(fù)制選定文本到剪切板
document.execCommand("Copy","false",null);
下面舉例：
// 插入span到第二個字符后面
var span = document.createElement('span');
span.innerHTML = '[this is add element]';
var sel = window.getSelection();
var startEl = $("#editor_id").next()[0].firstChild, startOffset = 2;
var range = document.createRange();
range.setStart(startEl, startOffset)
range.setEnd(startEl, startOffset);
range.collapse(true);
range.insertNode(span);
sel.removeAllRanges()
sel.addRange(range);
// 保存選定區(qū)
function saveSelectionRange()
{
if( window.getSelection )
{
var sel = window.getSelection();
if( sel.rangeCount > 0 ) return sel.getRangeAt(0);
}
else if( document.selection )
{
var sel = document.selection;
return sel.createRange();
}
return null;
}
// 載入選定區(qū)
function setSelectionRange(savedSel )
{
if( ! savedSel ) return;
if( window.getSelection )
{
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(savedSel);
}
else if( document.selection )
{
savedSel.select();
}
}
// 獲取光標(biāo)位置
function getCursortPosition (ctrl)
{
//獲取光標(biāo)位置函數(shù)
var CaretPos = 0;
// IE Support
if (document.selection)
{
ctrl.focus (); // 獲取焦點
var Sel = document.selection.createRange (); // 創(chuàng)建選定區(qū)域
Sel.moveStart('character', -ctrl.value.length); // 移動開始點到最左邊位置
CaretPos = Sel.text.length; // 獲取當(dāng)前選定區(qū)的文本內(nèi)容長度
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
{
CaretPos =ctrl.selectionStart; // 獲取選定區(qū)的開始點
}
return CaretPos;
}
// 設(shè)置光標(biāo)位置
function setCaretPosition(ctrl, pos)
{
//設(shè)置光標(biāo)位置函數(shù)
if(ctrl.setSelectionRange)
{
ctrl.focus(); // 獲取焦點
ctrl.setSelectionRange(pos,pos); // 設(shè)置選定區(qū)的開始和結(jié)束點
}
else if (ctrl.createTextRange)
{
var range = ctrl.createTextRange(); // 創(chuàng)建選定區(qū)
range.collapse(true); // 設(shè)置為折疊,即光標(biāo)起點和結(jié)束點重疊在一起
range.moveEnd('character', pos); // 移動結(jié)束點
range.moveStart('character', pos); // 移動開始點
range.select(); // 選定當(dāng)前區(qū)域
}
}
// 插入指定元素到指定位置
<!doctype html>
<html>
<head>
<title>selection</title>
</head>
<body>
<p id="p1" contenteditable="true"><b>Hello</b> World</p>
<input type="button" value="insertSpan" onclick="insertSpan()" />
</body>
<script>
function insertSpan() {
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.color = "red";
oSpan.appendChild(document.createTextNode("Inserted text"));
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.insertNode(oSpan);
}
</script>
</html>
