CONTENTEDITABLE的Javascript - 设置光标/插入符号索引(Javascri

我将如何去有关修改此（在CONTENTEDITABLE元素如何设置插入符（光标）位置（格）？），所以它接受了一些指标和元素，并设置光标位置到索引？

例如：如果我有一段话：

<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/

Answer 1:

下面是改编自一个答案在HTML选择后坚持Range对象的变化。请记住，这是不完美几种方式（如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();
    };
}

Answer 2:

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树...

我还是要解决这个问题，但不知何故，我怀疑我永远会。即使我做了代码的填充工具TreeWalker在IE8和更低...

Answer 3:

这是我在改善添的回答。它消除了有关隐藏人物的警告，但其他的警告仍然存在：

只有文本节点被考虑（通过点击和块元素隐含换行符不包括在索引）
所有文本节点都认为，即使是通过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<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
}

文章来源: Javascript Contenteditable - set Cursor / Caret to index