document.selection : IE
window.getSelection() ：Chrome、Safari颤难、FireFox
selection代表了當(dāng)前激活選中區(qū)，即高亮文本塊体箕，和/或文檔中用戶可執(zhí)行某些操作的其它元素唆樊。
對(duì)象的典型用途是作為用戶的輸入捺典，以便識(shí)別正在對(duì)文檔的哪一部分正在處理闪水，或者作為某一操作的結(jié)果輸出給用戶逗旁。
**** 用戶和腳本都可以創(chuàng)建選中區(qū) ****
用戶創(chuàng)建選中區(qū)的辦法是拖曳文檔的一部分。
腳本創(chuàng)建選中區(qū)的辦法是在文本區(qū)域或類似對(duì)象上調(diào)用select方法冒萄。
要獲取當(dāng)前選中區(qū)，請(qǐng)對(duì)document對(duì)象應(yīng)用selection關(guān)鍵字橙数。
要對(duì)選中區(qū)執(zhí)行操作尊流，請(qǐng)先用createRange方法從選中區(qū)創(chuàng)建一個(gè)文本區(qū)域?qū)ο蟆?/p>
一個(gè)文檔同一時(shí)間只能有一個(gè)選中區(qū)。選中區(qū)的類型決定了其中為空或者包含文本和/或元素塊灯帮。盡管空的選中區(qū)不包含任何內(nèi)容崖技，你仍然可以用它作為文檔中的位置標(biāo)志。
#以下代碼在IE瀏覽器中生效
// 對(duì)選定的文字進(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ū)起始點(diǎn)向后移動(dòng)2個(gè)字符
range.moveEnd("character",1); // 選定區(qū)結(jié)束點(diǎn)向后移動(dòng)1個(gè)字符
console.log(range.text)
#以下代碼在chrome/firefox中生效
window.getSelection().rangeCount // 獲取選定區(qū)數(shù)量
window.getSelection().isCollapsed // 選取定區(qū)起始點(diǎn)是否重疊
// 在光標(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/>")
// 在焦點(diǎn)狀態(tài)下钟哥，移動(dòng)光標(biāo)至第一個(gè)字符后面
document.getElementById('txt').select();
document.getElementById('txt').setSelectionRange(1,1)
// 復(fù)制選定文本到剪切板
document.execCommand("Copy","false",null);
下面舉例：
// 插入span到第二個(gè)字符后面
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 (); // 獲取焦點(diǎn)
var Sel = document.selection.createRange (); // 創(chuàng)建選定區(qū)域
Sel.moveStart('character', -ctrl.value.length); // 移動(dòng)開始點(diǎn)到最左邊位置
CaretPos = Sel.text.length; // 獲取當(dāng)前選定區(qū)的文本內(nèi)容長(zhǎng)度
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
{
CaretPos =ctrl.selectionStart; // 獲取選定區(qū)的開始點(diǎn)
}
return CaretPos;
}
// 設(shè)置光標(biāo)位置
function setCaretPosition(ctrl, pos)
{
//設(shè)置光標(biāo)位置函數(shù)
if(ctrl.setSelectionRange)
{
ctrl.focus(); // 獲取焦點(diǎn)
ctrl.setSelectionRange(pos,pos); // 設(shè)置選定區(qū)的開始和結(jié)束點(diǎn)
}
else if (ctrl.createTextRange)
{
var range = ctrl.createTextRange(); // 創(chuàng)建選定區(qū)
range.collapse(true); // 設(shè)置為折疊,即光標(biāo)起點(diǎn)和結(jié)束點(diǎn)重疊在一起
range.moveEnd('character', pos); // 移動(dòng)結(jié)束點(diǎn)
range.moveStart('character', pos); // 移動(dòng)開始點(diǎn)
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>
