标签：doctype sof nbsp developer get 复制 height dev tps
一、如何在可编辑区域div的光标处通过点击事件来添加文本内容
下面的例子是可编辑div的区域添加文本内容和判断光标位置的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
焦点位置：<input id="i1">选中文本：<input id="i2">
<div id="d1" contenteditable="true" style="width:200px;height:100px;border:1px solid black">1234567890abcdef
</div>
<button id="add">添加文字</button>
</body>
<script type="text/javascript">
add.onclick=function () {
var obj= d1;
var range, node;
if(!obj.hasfocus) {
obj.focus();
}
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0);
range.collapse(false);
node = range.createContextualFragment(‘10000ss‘);
var c = node.lastChild;
range.insertNode(node);
if(c){
range.setEndAfter(c);
range.setStartAfter(c)
}
var j = window.getSelection();
j.removeAllRanges(); range = window.getSelection().getRangeAt(0);
j.addRange(range);
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(text);
}
}
document.onselectionchange = function (e) {
// ie11
//判断是否支持document.selection属性
if (document.selection) {
var pos = 0;
var range = document.selection.createRange();
var srcele = range.parentElement();
//新建一个range，焦点在开头
var copy = document.body.createTextRange();
copy.moveToElementText(srcele);
//判断copy的焦点起始部分是否在range的焦点起始部分的后面
for (pos = 0; copy.compareEndPoints("StartToStart", range) < 0; pos++) {
//copy的焦点向后移动一个字符
copy.moveStart("character", 1);
}
document.getElementById(‘i1‘).value = pos;
document.getElementById(‘i2‘).value = range.htmlText;
}
// chrome uc
if (window.getSelection) {
//获取Selection对象
var se = window.getSelection();
//获取起始位置，这个是字符的序号位置，而不是坐标
var start = se.anchorOffset;
//获取结束位置
var end = se.focusOffset;
//获取起始的dom元素
var startEl = se.anchorNode.parentElement;
//获取结束的dom元素
var endEl = se.focusNode.parentElement;
//获取起始dom元素的文本内容
var startText = startEl.innerText;
var txt = ‘‘;
if (startEl == endEl) {
txt = startText.substring(start, end);
}
document.getElementById(‘i1‘).value = start;
document.getElementById(‘i2‘).value = txt;
}
}
</script>
</html>
range.startOffset;相对于上个元素
获取整个元素偏移量的方法（复制的情况需要自己来计算）
var range = window.getSelection().getRangeAt(0);
var offset = 0;
var str = ‘‘;
var container = range.endContainer;
console.log(container)
var i=0;
while(container.previousSibling){
// console.log(container.previousSibling.textContent.trim());
// console.log(container.previousSibling.textContent.trim().length);
str += container.previousSibling.textContent.trim();
offset += container.previousSibling.textContent.trim().length;
container = container.previousSibling;
i++;
// console.log(offset,container.previousSibling.textContent.trim().length)
}
selection是对当前激活选中区（即高亮文本）进行操作。
在非IE浏览器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()获得selection对象，本文讲述的是标准的selection操作方法。文中绝大部分内容来自 https://developer.mozilla.org/en/DOM/Selection
以下几个名词是英文文档中的几个名词。
标签：doctype sof nbsp developer get 复制 height dev tps
原文地址：https://www.cnblogs.com/yiyi17/p/9161740.html
