Javascript Contenteditable – 将Cursor / Caret设置为索引
我将如何修改它（ 如何在contenteditable元素（div）中设置插入符号（光标）？ ）所以它接受一个数字索引和元素并将光标位置设置为该索引？
例如：如果我有段落：
This is a paragraph.
我打电话给：
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的，使用相同的方法）：首先，只考虑文本节点，这意味着元素内部隐藏的元素内部; 第三，页面上折叠的连续空白字符都包含在索引中; 最后，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可用于文本节点，而不是元素节点。 否则他们会引发DOMexception。 所以你要做的就是
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代码…
这是我对蒂姆答案的改进。 它删除了有关隐藏字符的警告，但其他警告仍然存在：
- 仅考虑文本节点（
和块元素隐含的换行符不包含在索引中） - 考虑所有文本节点，甚至是那些被CSS或内部元素隐藏的元素内部
- 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 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