js 中的selection对象使用笔记+光标定位
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到第二个字符后面
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);
保存选定区
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; }
载入选定区
function setSelectionRange(savedSel ) { if( ! savedSel ) return; if( window.getSelection ) { var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(savedSel); } else if( document.selection ) { savedSel.select(); } };
1、获取光标位置
function getCursortPosition (ctrl) { //获取光标位置函数 var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); // 获取焦点 var Sel = document.selection.createRange (); // 创建选定区域 Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置 CaretPos = Sel.text.length; // 获取当前选定区的文本内容长度 } // Firefox support else if (ctrl.selectionStart || ctrl.selectionStart == '0'){ CaretPos =ctrl.selectionStart; // 获取选定区的开始点 } return CaretPos; }
2.设置光标位置
function setCaretPosition(ctrl, pos){ //设置光标位置函数 if(ctrl.setSelectionRange) { ctrl.focus(); // 获取焦点 ctrl.setSelectionRange(pos,pos); // 设置选定区的开始和结束点 } else if (ctrl.createTextRange){ var range = ctrl.createTextRange(); // 创建选定区 range.collapse(true); // 设置为折叠,即光标起点和结束点重叠在一起 range.moveEnd('character', pos); // 移动结束点 range.moveStart('character', pos); // 移动开始点 range.select(); // 选定当前区域 } }
3、将光标移动到输入框
ctrl.focus();
插入指定元素到指定位置的相关代码:
<!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()" /> <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> </body> </html>
简易富文本编辑器:
代码:
<!doctype html> <html> <head> <title>selection</title> </head> <body> <input type="text" name="txt" id="txt" /> <input type="button" value="移动光标" onclick="setCaretPosition(2)" /> <p id="p1" contenteditable="true"><b>Hello</b> World</p> <input type="button" value="insertSpanToFirst" onclick="insertSpan()" /> <input type="button" value="insertHTMLByJS" onclick="insertHTMLByJS()" /> <input type="button" value="insertHTMLByCommand" onclick="insertHTMLByCommand()" /> <input type="button" value="insertImgByCommand" onclick="insertImgByCommand()" /> <script> var p1element = document.getElementById('p1'); var cacheRange = null; p1element.onkeydown = function(e){ //alert(e.keyCode); }; p1element.onblur = function(){ console.log('blur'); var sel = window.getSelection(); if(sel.rangeCount){ cacheRange = sel.getRangeAt(0); cacheRange.anchorNode = sel.anchorNode; cacheRange.anchorOffset = sel.anchorOffset; cacheRange.focusNode = sel.focusNode; cacheRange.focusrOffset = sel.focusOffset; console.log(sel.anchorNode); console.log(sel.anchorOffset); } }; function setCaretPosition(pos){ var ctrl = document.getElementById('txt'); //设置光标位置函数 if(ctrl.setSelectionRange) { ctrl.select(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange){ var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } function insertSpan(){ var oP1 = document.getElementById("p1"); var oHello = oP1.firstChild; var oRange = document.createRange(); var oSpan = document.createElement("span"); oSpan.style.color = "red"; oSpan.appendChild(document.createTextNode("Inserted text")); oRange.setStart(oHello, 0); oRange.setEnd(oHello, 0); oRange.insertNode(oSpan); var ctrl = document.getElementById('p1'); //设置光标位置函数 if(ctrl.setSelectionRange) { ctrl.select(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange){ var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } function insertHTMLByJS(){ if(cacheRange === null) return; var appendEl = document.createElement("span"); appendEl.textContent = "this is span"; appendEl.style.color = "blue"; // var appendEl = document.createElement("span"); // appendEl.style.width = "100px"; // appendEl.style.height = "60px"; // appendEl.style.display = "inline-block"; // appendEl.style.background = "left top no-repeat url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png)"; // appendEl.innerHTML = " "; // 方式1,通过新创建的选定区来插入 // var oRange = document.createRange(); // console.log(cacheRange); // oRange.setStart(cacheRange.anchorNode, cacheRange.anchorOffset); // oRange.insertNode(appendEl); // 方式2,通过缓存之前的选定区来插入 var sel = window.getSelection(); sel.removeAllRanges(); cacheRange.insertNode(appendEl); if( ! sel.isCollapsed ){ sel.collapseToEnd(); } sel.addRange(cacheRange); // 移除光标显示 document.getElementById('p1').blur(); sel.removeAllRanges(); cacheRange = null; } function insertHTMLByCommand(){ if(cacheRange === null) return; // 方式2,通过缓存之前的选定区来插入 var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(cacheRange); 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>"); // 移除光标显示 document.getElementById('p1').blur(); sel.removeAllRanges(); cacheRange = null; } function insertImgByCommand(){ if(cacheRange === null) return; // 方式2,通过缓存之前的选定区来插入 var sel = window.getSelection(); if( ! sel.isCollapsed ){ sel.collapseToEnd(); } sel.addRange(cacheRange); document.execCommand("insertImage", "false", "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png"); // 移除光标显示 document.getElementById('p1').blur(); sel.removeAllRanges(); cacheRange = null; } </script> </body> </html>
遇到的坑,优化编辑框点击后有时无法成为编辑状态的问题
优化代码如下:
/* 优化编辑框点击后有时无法成为编辑状态的问题 */ var editor = document.getElementById('editor_id'), editorTimer = null; editor.addEventListener('click', function(){ console.log('click'); editorTimer = setTimeout(function(){ console.log('set focus'); var sel,range; if (window.getSelection && document.createRange) { range = document.createRange(); range.selectNodeContents(editor); range.collapse(true); range.setEnd(editor, editor.childNodes.length); range.setStart(editor, editor.childNodes.length); sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (document.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(editor); range.collapse(true); range.select(); } editor.focus(); },300); }, false); editor.addEventListener('focus', function(){ console.log('focus'); clearTimeout(editorTimer); }, false);
(附件index.zip为定位光标的demo)