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. var sel = window.getSelection();
4. var startEl = $("#editor_id").next()[0].firstChild, startOffset = 2;
5. var range = document.createRange();
6. range.setStart(startEl, startOffset)
7. range.setEnd(startEl, startOffset);
8. range.collapse(true);
9. range.insertNode(span);
10. sel.removeAllRanges()
11. 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. oRange.setStart(oHello, 2);
19. oRange.setEnd(oWorld, 3);
20. oRange.insertNode(oSpan);
21. }
22. </script>
23. </body>
24. </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. <p id="p1" contenteditable="true"><b>Hello</b> World</p>
10. <input type="button" value="insertSpanToFirst" onclick="insertSpan()" />
11. <input type="button" value="insertHTMLByJS" onclick="insertHTMLByJS()" />
12. <input type="button" value="insertHTMLByCommand" onclick="insertHTMLByCommand()" />
13. <input type="button" value="insertImgByCommand" onclick="insertImgByCommand()" />
14. <script>
15. var p1element = document.getElementById('p1');
16. var cacheRange = null;
17. p1element.onkeydown = function(e){
18. //alert(e.keyCode);
19. };
20. p1element.onblur = function(){
21. console.log('blur');
22. var sel = window.getSelection();
23. if(sel.rangeCount){
24. cacheRange = sel.getRangeAt(0);
25. cacheRange.anchorNode = sel.anchorNode;
26. cacheRange.anchorOffset = sel.anchorOffset;
27. cacheRange.focusNode = sel.focusNode;
28. cacheRange.focusrOffset = sel.focusOffset;
29. console.log(sel.anchorNode);
30. console.log(sel.anchorOffset);
31. }
32. };
33. function setCaretPosition(pos){
34. var ctrl = document.getElementById('txt');
35. //设置光标位置函数
36. if(ctrl.setSelectionRange) {
37. ctrl.select();
38. ctrl.setSelectionRange(pos,pos);
39. } else if (ctrl.createTextRange){
40. var range = ctrl.createTextRange();
41. range.collapse(true);
42. range.moveEnd('character', pos);
43. range.moveStart('character', pos);
44. range.select();
45. }
46. }
47. function insertSpan(){
48. var oP1 = document.getElementById("p1");
49. var oHello = oP1.firstChild;
50. var oRange = document.createRange();
51. var oSpan = document.createElement("span");
52. oSpan.style.color = "red";
53. oSpan.appendChild(document.createTextNode("Inserted text"));
54. oRange.setStart(oHello, 0);
55. oRange.setEnd(oHello, 0);
56. oRange.insertNode(oSpan);
57. var ctrl = document.getElementById('p1');
58. //设置光标位置函数
59. if(ctrl.setSelectionRange) {
60. ctrl.select();
61. ctrl.setSelectionRange(pos,pos);
62. } else if (ctrl.createTextRange){
63. var range = ctrl.createTextRange();
64. range.collapse(true);
65. range.moveEnd('character', pos);
66. range.moveStart('character', pos);
67. range.select();
68. }
69. }
70. function insertHTMLByJS(){
71. if(cacheRange === null) return;
72. var appendEl = document.createElement("span");
73. appendEl.textContent = "this is span";
74. appendEl.style.color = "blue";
75. // var appendEl = document.createElement("span");
76. // appendEl.style.width = "100px";
77. // appendEl.style.height = "60px";
78. // appendEl.style.display = "inline-block";
79. // appendEl.style.background = "left top no-repeat url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png)";
80. // appendEl.innerHTML = "&nbsp;";
81. // 方式1,通过新创建的选定区来插入
82. // var oRange = document.createRange();
83. // console.log(cacheRange);
84. // oRange.setStart(cacheRange.anchorNode, cacheRange.anchorOffset);
85. // oRange.insertNode(appendEl);
86. // 方式2,通过缓存之前的选定区来插入
87. var sel = window.getSelection();
88. sel.removeAllRanges();
89. cacheRange.insertNode(appendEl);
90. if( ! sel.isCollapsed ){
91. sel.collapseToEnd();
92. }
93. sel.addRange(cacheRange);
94. // 移除光标显示
95. document.getElementById('p1').blur();
96. sel.removeAllRanges();
97. cacheRange = null;
98. }
99. function insertHTMLByCommand(){
100. if(cacheRange === null) return;
101. // 方式2,通过缓存之前的选定区来插入
102. var sel = window.getSelection();
103. sel.removeAllRanges();
104. sel.addRange(cacheRange);
105. 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>");
106. // 移除光标显示
107. document.getElementById('p1').blur();
108. sel.removeAllRanges();
109. cacheRange = null;
110. }
111. function insertImgByCommand(){
112. if(cacheRange === null) return;
113. // 方式2,通过缓存之前的选定区来插入
114. var sel = window.getSelection();
115. if( ! sel.isCollapsed ){
116. sel.collapseToEnd();
117. }
118. sel.addRange(cacheRange);
119. document.execCommand("insertImage", "false", "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png");
120. // 移除光标显示
121. document.getElementById('p1').blur();
122. sel.removeAllRanges();
123. cacheRange = null;
124. }
125. </script>
126. </body>
127. </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 浏览器返回按钮/手机返回按钮事件监听

浏览器记住密码整理（三）