Question

如何使用JavaScript设置指向contenteditable div的指针？这样的事情：$('[contenteditable="true"]').setCursor(10);

Answer 1

以下是可能对您有所帮助的代码段。您可以找到工作示例here http://jsfiddle.net/naveen_champ/wps4cn01/

更新：在Tim评论之后[2014年10月2日]更新了代码，以匹配支持内容的可编辑元素。

!function($){   
    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
    }
    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();
        };
    }


    $.fn.setCaretPosition = function(caretPos) {
        return this.each(function(){
            var elem = this;
            setSelectionByCharacterOffsets(elem, caretPos, caretPos);
        });
    }
}(window.jQuery);

将指针设置为contenteditable

1 个答案: