设置Cursor / Caret索引
我如何去修改这个（如何在contenteditable元素（div）中设置插入符号（光标）位置？），因此它接受一个数字索引和元素并将光标位置设置为该索引？
例如：如果我有这个段落：
<p contenteditable="true">This is a paragraph.</p>
我打电话给：
setCaret($(this).get(0), 3)
光标将移动到索引3，如下所示：
Thi|s is a paragraph.
我有这个，但没有运气：
function setCaret(contentEditableElement, index)
{
var range,selection;
if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
{
range = document.createRange();//Create a range (a range is a like the selection but invisible)
range.setStart(contentEditableElement,index);
range.collapse(true);
selection = window.getSelection();//get the selection object (allows you to change selection)
selection.removeAllRanges();//remove any selections already made
selection.addRange(range);//make the range you have just created the visible selection
}
else if(document.selection)//IE 8 and lower
{
range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
range.select();//Select the range (make it the visible selection
}
}
http://jsfiddle.net/BanQU/4/
这里有一个解决方案，从HTML中选择后继续改变范围对象。 请记住，这在几个方面并不完美（正如MaxArt的，它使用相同的方法）：首先，只考虑文本节点，这意味着由<br>和块元素隐含的换行符不包含在指数; 其次，所有的文本节点都会被考虑，甚至是那些被CSS隐藏或者<script>元素内部的元素; 第三，页面上折叠的连续空白字符都包含在索引中; 最后，IE <= 8的规则再次不同，因为它使用了不同的机制。
var setSelectionByCharacterOffsets = null;
if (window.getSelection && document.createRange) {
setSelectionByCharacterOffsets = function(containerEl, start, end) {
var charIndex = 0, range = document.createRange();
range.setStart(containerEl, 0);
range.collapse(true);
var nodeStack = [containerEl], node, foundStart = false, stop = false;
while (!stop && (node = nodeStack.pop())) {
if (node.nodeType == 3) {
var nextCharIndex = charIndex + node.length;
if (!foundStart && start >= charIndex && start <= nextCharIndex) {
range.setStart(node, start - charIndex);
foundStart = true;
}
if (foundStart && end >= charIndex && end <= nextCharIndex) {
range.setEnd(node, end - charIndex);
stop = true;
}
charIndex = nextCharIndex;
} else {
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
} else if (document.selection) {
setSelectionByCharacterOffsets = function(containerEl, start, end) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(containerEl);
textRange.collapse(true);
textRange.moveEnd("character", end);
textRange.moveStart("character", start);
textRange.select();
};
}
range.setStart和range.setEnd可用于文本节点，而不是元素节点。 否则他们会引发一个DOM异常。 所以你必须做的是
range.setStart(contentEditableElement.firstChild, index);
我没有得到你为IE8做的和更低的。 你在哪里使用index ？
总体而言，如果节点的内容多于单个文本节点，则代码将失败。 对于使用isContentEditable === true节点，可能会发生这种情况，因为用户可以从Word或其他位置粘贴文本，或者创建一个新行等等。
以下是我在框架中所做的改编：
var setSelectionRange = function(element, start, end) {
var rng = document.createRange(),
sel = getSelection(),
n, o = 0,
tw = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, null);
while (n = tw.nextNode()) {
o += n.nodeValue.length;
if (o > start) {
rng.setStart(n, n.nodeValue.length + start - o);
start = Infinity;
}
if (o >= end) {
rng.setEnd(n, n.nodeValue.length + end - o);
break;
}
}
sel.removeAllRanges();
sel.addRange(rng);
};
var setCaret = function(element, index) {
setSelectionRange(element, index, index);
};
这里的诀窍是使用setSelectionRange函数 - 使用start === end选择内部和元素的一系列文本。 在contentEditable元素中，这将插入符号放在期望的位置。
这应该适用于所有现代浏览器，以及不仅仅是文本节点作为后代的元素。 我会让你添加检查start和end在适当的范围内。
对于IE8和更低版本，事情有点困难。 事情看起来有点像这样：
var setSelectionRange = function(element, start, end) {
var rng = document.body.createTextRange();
rng.moveToElementText(element);
rng.moveStart("character", start);
rng.moveEnd("character", end - element.innerText.length - 1);
rng.select();
};
这里的问题是innerText不适合这种事情，因为一些空白处被折叠。 如果只有一个文本节点，事情就没有问题，但是会被搞得像你在contentEditable元素中获得的更复杂的东西。
IE8不支持textContent ，所以你必须使用TreeWalker来计算字符。 但是，IE8也不支持TreeWalker ，所以你必须自己走DOM树......
我仍然必须解决这个问题，但不知何故，我怀疑我永远不会。 即使我在IE8中为TreeWalker编写了polyfill代码，并且...
这是我对蒂姆答案的改进。 它消除了隐藏字符的警告，但其他警告仍然存在：
代码：
var setSelectionByCharacterOffsets = null;
if (window.getSelection && document.createRange) {
setSelectionByCharacterOffsets = function(containerEl, start, end) {
var charIndex = 0, range = document.createRange();
range.setStart(containerEl, 0);
range.collapse(true);
var nodeStack = [containerEl], node, foundStart = false, stop = false;
while (!stop && (node = nodeStack.pop())) {
if (node.nodeType == 3) {
var hiddenCharacters = findHiddenCharacters(node, node.length)
var nextCharIndex = charIndex + node.length - hiddenCharacters;
if (!foundStart && start >= charIndex && start <= nextCharIndex) {
var nodeIndex = start-charIndex
var hiddenCharactersBeforeStart = findHiddenCharacters(node, nodeIndex)
range.setStart(node, nodeIndex + hiddenCharactersBeforeStart);
foundStart = true;
}
if (foundStart && end >= charIndex && end <= nextCharIndex) {
var nodeIndex = end-charIndex
var hiddenCharactersBeforeEnd = findHiddenCharacters(node, nodeIndex)
range.setEnd(node, nodeIndex + hiddenCharactersBeforeEnd);
stop = true;
}
charIndex = nextCharIndex;
} else {
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
} else if (document.selection) {
setSelectionByCharacterOffsets = function(containerEl, start, end) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(containerEl);
textRange.collapse(true);
textRange.moveEnd("character", end);
textRange.moveStart("character", start);
textRange.select();
};
}
var x = document.getElementById('a')
x.focus()
setSelectionByCharacterOffsets(x, 1, 13)
function findHiddenCharacters(node, beforeCaretIndex) {
var hiddenCharacters = 0
var lastCharWasWhiteSpace=true
for(var n=0; n-hiddenCharacters<beforeCaretIndex &&n<node.length; n++) {
if([' ','n','t','r'].indexOf(node.textContent[n]) !== -1) {
if(lastCharWasWhiteSpace)
hiddenCharacters++
else
lastCharWasWhiteSpace = true
} else {
lastCharWasWhiteSpace = false
}
}
return hiddenCharacters
}