HTML5 Selection对象

一、实例1,设置网页选中内容并且复制到黏贴板

<p id='txtone'>发的FDSAFSDFDS!其实不管哪个行业,
    <img src='http://beijing.gongjuji.net/imgdata/big/4ba6635a-1e69-42b1-b64d-c25f655b4152.jpg'/>
    都会遇到这个问题。所以企业员工自身幸福感很重要,若连员工都不幸福,他们怎么能提供客户满意的服务呢?更何况作为客服人员,如果自己都不快乐,他们又怎么能去提升别人的心理资本,去增加他们的幸福感呢?快乐员工高效工作不应该仅仅只是一句口号而已~
</p>
<button id="button">选中一些文字,然后点击本按钮</button>
<script>
    var oBtn = document.getElementById("button");
    oBtn.onclick = function () {
        var range = document.createRange();
        var node1 = document.getElementById('txtone');
        range.selectNode(node1);
        var userSelection;
        if (window.getSelection) { //现代浏览器
            userSelection = window.getSelection();
        } else if (document.selection) { //IE浏览器 考虑到Opera,应该放在后面
            userSelection = document.selection.createRange();
        }
        //设置选中区域
        userSelection.addRange(range);
        //执行命令复制复制到黏贴板
        document.execCommand('Copy',false,null);
    };
</script>

 

二、其他

IE:document.selection   

FireFox:window.getSelection()   

document.selection只有IE支持,

window.getSelection()也只有FireFox和   Safari支持,都不是标准语法。 
selection   对象  
  --------------------------------------------------------------------------------  
   
  代表了当前激活选中区,即高亮文本块,和/或文档中用户可执行某些操作的其它元素。  
  selection   对象的典型用途是作为用户的输入,以便识别正在对文档的哪一部分正在处理,或者作为某一操作的结果输出给用户。  
   
  用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用   select   方法。要获取当前选中区,请对   document   对象应用   selection   关键字。要对选中区执行操作,请先用   createRange   方法从选中区创建一个文本区域对象。  
   
  一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容,你仍然可以用它作为文档中的位置标志。

 

#以下代码在IE浏览器中生效

 

// 对选定的文字进行加粗

document.selection.createRange().execCommand("Bold")

//  获取选定的文本

document.selection.createRange().text

// 获取选定的html

document.selection.createRange().htmlText

// 清除选定的内容

document.selection.clear()

// 弹出选择区的类型( None,Text,...)

document.selection.type

 // 获取选取区的文字

var range = document.selection.createRange();  // 创建文本区域对象

range.moveStart("character",2);                          // 选定区起始点向后移动2个字符

range.moveEnd("character",1);                          // 选定区结束点向后移动1个字符

console.log(range.text)

 

# 以下代码 仅在chrome/firefox下生效

window.getSelection().rangeCount // 获取选定区数量

window.getSelection().isCollapsed // 选取定区起始点是否重叠

// 在光标处插入图片

document.execCommand("insertImage","false","https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png")

// 在光标处插入html代码

document.execCommand("insertHTML","false","<br/>")

// 在焦点状态下,移动光标至第一个字符后面

document.getElementById('txt').select();

document.getElementById('txt').setSelectionRange(1,1)

// 复制选定文本到剪切板

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);  

 

 

 保存选定区

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.     }  

 

载入选定区

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、获取光标位置

Js代码  收藏代码
  1. function getCursortPosition (ctrl) {  
  2.     //获取光标位置函数   
  3.     var CaretPos = 0;   
  4.     // IE Support  
  5.     if (document.selection) {   
  6.         ctrl.focus (); // 获取焦点  
  7.         var Sel = document.selection.createRange (); // 创建选定区域  
  8.         Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置  
  9.         CaretPos = Sel.text.length;                      // 获取当前选定区的文本内容长度  
  10.     }   
  11.     // Firefox support   
  12.     else if (ctrl.selectionStart || ctrl.selectionStart == '0'){  
  13.         CaretPos =ctrl.selectionStart; // 获取选定区的开始点   
  14.     }  
  15.     return CaretPos;   
  16. }  

 

2.设置光标位置

Js代码  收藏代码
  1. function setCaretPosition(ctrl, pos){  
  2.     //设置光标位置函数   
  3.     if(ctrl.setSelectionRange) {  
  4.     ctrl.focus();  // 获取焦点  
  5.     ctrl.setSelectionRange(pos,pos);  // 设置选定区的开始和结束点  
  6.     } else if (ctrl.createTextRange){   
  7.         var range = ctrl.createTextRange();  // 创建选定区  
  8.         range.collapse(true);                // 设置为折叠,即光标起点和结束点重叠在一起  
  9.         range.moveEnd('character', pos);     // 移动结束点  
  10.         range.moveStart('character', pos);   // 移动开始点  
  11.         range.select();                      // 选定当前区域  
  12.     }   
  13. }  

 

3、将光标移动到输入框
ctrl.focus();

 

插入指定元素到指定位置的相关代码:

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="移动光标" 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.     //设置光标位置函数      
  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.     //设置光标位置函数      
  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 = "&nbsp;";  
  89.       
  90.     // 方式1,通过新创建的选定区来插入  
  91.     // var oRange = document.createRange();           
  92.     // console.log(cacheRange);      
  93.     // oRange.setStart(cacheRange.anchorNode, cacheRange.anchorOffset);      
  94.     // oRange.insertNode(appendEl);  
  95.       
  96.   
  97.     // 方式2,通过缓存之前的选定区来插入    
  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.     // 移除光标显示  
  107.     document.getElementById('p1').blur();  
  108.     sel.removeAllRanges();              
  109.     cacheRange = null;  
  110.       
  111. }  
  112. function insertHTMLByCommand(){    
  113.     if(cacheRange === null) return;  
  114.       
  115.     // 方式2,通过缓存之前的选定区来插入    
  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.     // 移除光标显示  
  121.     document.getElementById('p1').blur();  
  122.     sel.removeAllRanges();              
  123.     cacheRange = null;  
  124.       
  125. }  
  126. function insertImgByCommand(){  
  127.     if(cacheRange === null) return;  
  128.       
  129.     // 方式2,通过缓存之前的选定区来插入    
  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.     // 移除光标显示  
  137.     document.getElementById('p1').blur();  
  138.     sel.removeAllRanges();              
  139.     cacheRange = null;  
  140.       
  141. }  
  142.   
  143. </script>  
  144. </body>  
  145. </html>  

 

遇到的坑,优化编辑框点击后有时无法成为编辑状态的问题

优化代码如下:

Js代码  收藏代码
    1. /* 优化编辑框点击后有时无法成为编辑状态的问题 */  
    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);  

 

 

更多:

JS Range使用整理

HTML5 浏览器返回按钮/手机返回按钮事件监听

浏览器记住密码整理(三)

posted @ 2018-03-26 22:09  天马3798  阅读(997)  评论(0编辑  收藏  举报