jQuery在新的附加元素之后移动插入符/光标？

Question

所以，我有这个代码，当按下选项卡时附加选项卡，但是在添加选项卡后光标停留在选项卡后面。如何在我追加新元素时将光标移动到选项卡右侧/右侧。我有这个代码： jQuery的

$('.example').each(function(){
    this.contentEditable = true;
});

if(event.keyCode==9){
    event.preventDefault();
    $('.example').append('\t');
}

HTML

<div class="example"></div>

这是不能从har0lds提案中获得的代码（我从主题中读到的内容不是我所提出的）：

$('.example').each(function(){
    this.contentEditable = true;
});

function placeCaret(field){
                var editable = field,
                selection, range;

                // Populates selection and range variables
                var captureSelection = function(e) {
                // Don't capture selection outside editable region
                var isOrContainsAnchor = false,
                    isOrContainsFocus = false,
                    sel = window.getSelection(),
                    parentAnchor = sel.anchorNode,
                    parentFocus = sel.focusNode;

                while(parentAnchor && parentAnchor != document.documentElement) {
                    if(parentAnchor == editable) {
                    isOrContainsAnchor = true;
                    }
                    parentAnchor = parentAnchor.parentNode;
                }

                while(parentFocus && parentFocus != document.documentElement) {
                    if(parentFocus == editable) {
                    isOrContainsFocus = true;
                    }
                    parentFocus = parentFocus.parentNode;
                }

                if(!isOrContainsAnchor || !isOrContainsFocus) {
                    return;
                }

                selection = window.getSelection();

                // Get range (standards)
                if(selection.getRangeAt !== undefined) {
                    range = selection.getRangeAt(0);

                // Get range (Safari 2)
                } else if(
                    document.createRange &&
                    selection.anchorNode &&
                    selection.anchorOffset &&
                    selection.focusNode &&
                    selection.focusOffset
                ) {
                    range = document.createRange();
                    range.setStart(selection.anchorNode, selection.anchorOffset);
                    range.setEnd(selection.focusNode, selection.focusOffset);
                } else {
                    // Failure here, not handled by the rest of the script.
                    // Probably IE or some older browser
                }
                };

                // Recalculate selection while typing
                editable.onkeyup = captureSelection;

                // Recalculate selection after clicking/drag-selecting
                editable.onmousedown = function(e) {
                editable.className = editable.className + ' selecting';
                };
                document.onmouseup = function(e) {
                if(editable.className.match(/\sselecting(\s|$)/)) {
                    editable.className = editable.className.replace(/ selecting(\s|$)/, '');
                    captureSelection();
                }
                };

                editable.onblur = function(e) {
                var cursorStart = document.createElement('span'),
                    collapsed = !!range.collapsed;

                cursorStart.id = 'cursorStart';
                cursorStart.appendChild(document.createTextNode('—'));

                // Insert beginning cursor marker
                range.insertNode(cursorStart);

                // Insert end cursor marker if any text is selected
                if(!collapsed) {
                    var cursorEnd = document.createElement('span');
                    cursorEnd.id = 'cursorEnd';
                    range.collapse();
                    range.insertNode(cursorEnd);
                }
                };

                // Add callbacks to afterFocus to be called after cursor is replaced
                // if you like, this would be useful for styling buttons and so on
                var afterFocus = [];
                editable.onfocus = function(e) {
                // Slight delay will avoid the initial selection
                // (at start or of contents depending on browser) being mistaken
                setTimeout(function() {
                    var cursorStart = document.getElementById('cursorStart'),
                    cursorEnd = document.getElementById('cursorEnd');

                    // Don't do anything if user is creating a new selection
                    if(editable.className.match(/\sselecting(\s|$)/)) {
                    if(cursorStart) {
                        cursorStart.parentNode.removeChild(cursorStart);
                    }
                    if(cursorEnd) {
                        cursorEnd.parentNode.removeChild(cursorEnd);
                    }
                    } else if(cursorStart) {
                    captureSelection();
                    var range = document.createRange();

                    if(cursorEnd) {
                        range.setStartAfter(cursorStart);
                        range.setEndBefore(cursorEnd);

                        // Delete cursor markers
                        cursorStart.parentNode.removeChild(cursorStart);
                        cursorEnd.parentNode.removeChild(cursorEnd);

                        // Select range
                        selection.removeAllRanges();
                        selection.addRange(range);
                    } else {
                        range.selectNode(cursorStart);

                        // Select range
                        selection.removeAllRanges();
                        selection.addRange(range);

                        // Delete cursor marker
                        document.execCommand('delete', false, null);
                    }
                    }

                    // Call callbacks here
                    for(var i = 0; i < afterFocus.length; i++) {
                    afterFocus[i]();
                    }
                    afterFocus = [];

                    // Register selection again
                    captureSelection();
                }, 10);
                };
}

if(event.keyCode==9){
    event.preventDefault();
    $('.example').append('\t');
    var element = document.getElementsByClassName('example');
    placeCaret(element[0]);
}

解决方案就是这个 - Set caret position right after the inserted element in a contentEditable div