九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

IE：document.selection 　　

FireFox：window.getSelection() 　　

document.selection只有IE支持，

window.getSelection()也只有FireFox和   Safari支持，都不是標(biāo)準(zhǔn)語法。
selection   對象  
  -------------------------------------------------------------------------------- 
  
  代表了當(dāng)前激活選中區(qū)，即高亮文本塊，和/或文檔中用戶可執(zhí)行某些操作的其它元素。 
  selection   對象的典型用途是作為用戶的輸入，以便識別正在對文檔的哪一部分正在處理，或者作為某一操作的結(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ū)ο蟆?nbsp;
  
  一個文檔同一時間只能有一個選中區(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ū)ο?/p>

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到第二個字符后面

Js代碼  

1. var span = document.createElement('span');  
2. span.innerHTML = '[this is add element]';  
3.   
4. var sel = window.getSelection();  
5. var startEl = $("#editor_id").next()[0].firstChild, startOffset = 2;  
6. var range = document.createRange();  
7. range.setStart(startEl, startOffset)  
8. range.setEnd(startEl, startOffset);  
9. range.collapse(true);  
10. range.insertNode(span);  
11. sel.removeAllRanges()  
12. sel.addRange(range);  

 保存選定區(qū)

Js代碼  

1. function saveSelectionRange()  
2.     {  
3.         if( window.getSelection )  
4.         {  
5.             var sel = window.getSelection();  
6.             if( sel.rangeCount > 0 )  
7.                 return sel.getRangeAt(0);  
8.         }  
9.         else if( document.selection )  
10.         {  
11.             var sel = document.selection;  
12.             return sel.createRange();  
13.         }  
14.         return null;  
15.     }  

載入選定區(qū)

Js代碼  

1. function setSelectionRange(savedSel )  
2.     {  
3.         if( ! savedSel )  
4.             return;  
5.         if( window.getSelection )  
6.         {  
7.             var sel = window.getSelection();  
8.             sel.removeAllRanges();  
9.             sel.addRange(savedSel);  
10.         }  
11.         else if( document.selection )  
12.         {  
13.             savedSel.select();  
14.         }  
15.     };  

1、獲取光標(biāo)位置

Js代碼  

1. function getCursortPosition (ctrl) {  
2.     //獲取光標(biāo)位置函數(shù)   
3.     var CaretPos = 0;   
4.     // IE Support  
5.     if (document.selection) {   
6.         ctrl.focus (); // 獲取焦點  
7.         var Sel = document.selection.createRange (); // 創(chuàng)建選定區(qū)域  
8.         Sel.moveStart('character', -ctrl.value.length); // 移動開始點到最左邊位置  
9.         CaretPos = Sel.text.length;                      // 獲取當(dāng)前選定區(qū)的文本內(nèi)容長度  
10.     }   
11.     // Firefox support   
12.     else if (ctrl.selectionStart || ctrl.selectionStart == '0'){  
13.         CaretPos =ctrl.selectionStart; // 獲取選定區(qū)的開始點   
14.     }  
15.     return CaretPos;   
16. }  

2.設(shè)置光標(biāo)位置

Js代碼  

1. function setCaretPosition(ctrl, pos){  
2.     //設(shè)置光標(biāo)位置函數(shù)   
3.     if(ctrl.setSelectionRange) {  
4.     ctrl.focus();  // 獲取焦點  
5.     ctrl.setSelectionRange(pos,pos);  // 設(shè)置選定區(qū)的開始和結(jié)束點  
6.     } else if (ctrl.createTextRange){   
7.         var range = ctrl.createTextRange();  // 創(chuàng)建選定區(qū)  
8.         range.collapse(true);                // 設(shè)置為折疊,即光標(biāo)起點和結(jié)束點重疊在一起  
9.         range.moveEnd('character', pos);     // 移動結(jié)束點  
10.         range.moveStart('character', pos);   // 移動開始點  
11.         range.select();                      // 選定當(dāng)前區(qū)域  
12.     }   
13. }  

3、將光標(biāo)移動到輸入框
ctrl.focus();

插入指定元素到指定位置的相關(guān)代碼:

Html代碼  

1. <!doctype html>  
2. <html>  
3. <head>  
4. <title>selection</title>  
5. </head>  
6. <body>  
7.     <p id="p1" contenteditable="true"><b>Hello</b> World</p>    
8.     <input type="button" value="insertSpan" onclick="insertSpan()" />  
9.     <script>    
10.     function insertSpan(){  
11.     var oP1 = document.getElementById("p1");    
12.     var oHello = oP1.firstChild.firstChild;    
13.     var oWorld = oP1.lastChild;    
14.     var oRange = document.createRange();    
15.     var oSpan = document.createElement("span");    
16.     oSpan.style.color = "red";    
17.     oSpan.appendChild(document.createTextNode("Inserted text"));    
18.          
19.     oRange.setStart(oHello, 2);    
20.     oRange.setEnd(oWorld, 3);    
21.     oRange.insertNode(oSpan);    
22.     }  
23.     </script>    
24. </body>  
25. </html>  

簡易富文本編輯器：

代碼：

Html代碼  

1. <!doctype html>  
2. <html>  
3. <head>  
4. <title>selection</title>  
5. </head>  
6. <body>  
7. <input type="text" name="txt" id="txt" />  
8. <input type="button" value="移動光標(biāo)" onclick="setCaretPosition(2)" />  
9.   
10. <p id="p1" contenteditable="true"><b>Hello</b> World</p>  
11. <input type="button" value="insertSpanToFirst" onclick="insertSpan()" />    
12. <input type="button" value="insertHTMLByJS" onclick="insertHTMLByJS()" />    
13. <input type="button" value="insertHTMLByCommand" onclick="insertHTMLByCommand()" />    
14. <input type="button" value="insertImgByCommand" onclick="insertImgByCommand()" />    
15.   
16. <script>  
17. var p1element = document.getElementById('p1');  
18. var cacheRange = null;  
19. p1element.onkeydown = function(e){  
20.     //alert(e.keyCode);  
21. };  
22. p1element.onblur = function(){  
23.   
24.     console.log('blur');  
25.     var sel = window.getSelection();  
26.     if(sel.rangeCount){  
27.         cacheRange = sel.getRangeAt(0);  
28.         cacheRange.anchorNode = sel.anchorNode;  
29.         cacheRange.anchorOffset = sel.anchorOffset;  
30.         cacheRange.focusNode = sel.focusNode;  
31.         cacheRange.focusrOffset = sel.focusOffset;  
32.         console.log(sel.anchorNode);  
33.         console.log(sel.anchorOffset);      
34.     }  
35.       
36. };  
37. function setCaretPosition(pos){     
38.     var ctrl = document.getElementById('txt');  
39.     //設(shè)置光標(biāo)位置函數(shù)      
40.     if(ctrl.setSelectionRange) {     
41.         ctrl.select();  
42.         ctrl.setSelectionRange(pos,pos);      
43.     } else if (ctrl.createTextRange){      
44.         var range = ctrl.createTextRange();      
45.         range.collapse(true);      
46.         range.moveEnd('character', pos);      
47.         range.moveStart('character', pos);      
48.         range.select();      
49.     }      
50. }    
51. function insertSpan(){  
52.     var oP1 = document.getElementById("p1");      
53.     var oHello = oP1.firstChild;      
54.     var oRange = document.createRange();      
55.     var oSpan = document.createElement("span");      
56.     oSpan.style.color = "red";      
57.     oSpan.appendChild(document.createTextNode("Inserted text"));      
58.            
59.     oRange.setStart(oHello, 0);      
60.     oRange.setEnd(oHello, 0);      
61.     oRange.insertNode(oSpan);  
62.   
63.     var ctrl = document.getElementById('p1');  
64.     //設(shè)置光標(biāo)位置函數(shù)      
65.     if(ctrl.setSelectionRange) {     
66.         ctrl.select();  
67.         ctrl.setSelectionRange(pos,pos);      
68.     } else if (ctrl.createTextRange){      
69.         var range = ctrl.createTextRange();      
70.         range.collapse(true);      
71.         range.moveEnd('character', pos);      
72.         range.moveStart('character', pos);      
73.         range.select();      
74.     }   
75. }  
76. function insertHTMLByJS(){    
77.     if(cacheRange === null) return;  
78.       
79.     var appendEl = document.createElement("span");  
80.     appendEl.textContent = "this is span";  
81.     appendEl.style.color = "blue";  
82.   
83.     // var appendEl = document.createElement("span");      
84.     // appendEl.style.width = "100px";      
85.     // appendEl.style.height = "60px";      
86.     // appendEl.style.display = "inline-block";  
87.     // appendEl.style.background = "left top no-repeat url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png)";  
88.     // appendEl.innerHTML = " ";  
89.       
90.     // 方式1,通過新創(chuàng)建的選定區(qū)來插入  
91.     // var oRange = document.createRange();           
92.     // console.log(cacheRange);      
93.     // oRange.setStart(cacheRange.anchorNode, cacheRange.anchorOffset);      
94.     // oRange.insertNode(appendEl);  
95.       
96.   
97.     // 方式2,通過緩存之前的選定區(qū)來插入    
98.     var sel = window.getSelection();  
99.     sel.removeAllRanges();  
100.     cacheRange.insertNode(appendEl);  
101.   
102.     if( ! sel.isCollapsed ){  
103.         sel.collapseToEnd();  
104.     }  
105.     sel.addRange(cacheRange);  
106.     // 移除光標(biāo)顯示  
107.     document.getElementById('p1').blur();  
108.     sel.removeAllRanges();              
109.     cacheRange = null;  
110.       
111. }  
112. function insertHTMLByCommand(){    
113.     if(cacheRange === null) return;  
114.       
115.     // 方式2,通過緩存之前的選定區(qū)來插入    
116.     var sel = window.getSelection();  
117.     sel.removeAllRanges();  
118.     sel.addRange(cacheRange);  
119.     document.execCommand("insertHTML", "false", "<span style='color:#ff3300'><img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=50 height=50 /></span>");  
120.     // 移除光標(biāo)顯示  
121.     document.getElementById('p1').blur();  
122.     sel.removeAllRanges();              
123.     cacheRange = null;  
124.       
125. }  
126. function insertImgByCommand(){  
127.     if(cacheRange === null) return;  
128.       
129.     // 方式2,通過緩存之前的選定區(qū)來插入    
130.     var sel = window.getSelection();  
131.     if( ! sel.isCollapsed ){  
132.         sel.collapseToEnd();  
133.     }  
134.     sel.addRange(cacheRange);  
135.     document.execCommand("insertImage", "false", "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png");  
136.     // 移除光標(biāo)顯示  
137.     document.getElementById('p1').blur();  
138.     sel.removeAllRanges();              
139.     cacheRange = null;  
140.       
141. }  
142.   
143. </script>  
144. </body>  
145. </html>  

遇到的坑，優(yōu)化編輯框點擊后有時無法成為編輯狀態(tài)的問題

優(yōu)化代碼如下：

Js代碼  

1. /* 優(yōu)化編輯框點擊后有時無法成為編輯狀態(tài)的問題 */  
2.             var editor = document.getElementById('editor_id'), editorTimer = null;  
3.             editor.addEventListener('click', function(){  
4.                 console.log('click');  
5.                 editorTimer = setTimeout(function(){  
6.                     console.log('set focus');  
7.                     var sel,range;  
8.                     if (window.getSelection && document.createRange) {  
9.                       range = document.createRange();  
10.                       range.selectNodeContents(editor);  
11.                       range.collapse(true);  
12.                       range.setEnd(editor, editor.childNodes.length);  
13.                       range.setStart(editor, editor.childNodes.length);  
14.                       sel = window.getSelection();  
15.                       sel.removeAllRanges();  
16.                       sel.addRange(range);  
17.                     } else if (document.body.createTextRange) {  
18.                       range = document.body.createTextRange();  
19.                       range.moveToElementText(editor);  
20.                       range.collapse(true);  
21.                       range.select();  
22.                     }               
23.                     editor.focus();  
24.                 },300);  
25.             }, false);  
26.             editor.addEventListener('focus', function(){  
27.                 console.log('focus');  
28.                 clearTimeout(editorTimer);  
29.             }, false);  

（附件index.zip為定位光標(biāo)的demo）