在可满足内容的div内的span元素后设置游标

Question

如何在可满足内容的div内的span元素后设置光标?现在，我有一个图像在span元素中，在可满足内容的div中。

当我添加一些字符时，它们被添加到span内，但我希望它们被添加到span元素之后。有什么好主意吗?

Answer 1

在IE <= 8以外的浏览器中，可以这样做:

function placeCaretAfterNode(node) {
    if (typeof window.getSelection != "undefined") {
        var range = document.createRange();
        range.setStartAfter(node);
        range.collapse(true);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

然而，一些浏览器(尤其是基于webkit的浏览器)对于文档中插入符号的有效位置有固定的想法，并且会将您添加到选择中的任何范围规范化以符合这些想法。下面的示例将在Firefox和IE 9中实现您想要的效果，但在Chrome或Safari中无法实现:

http://jsfiddle.net/5dxwx/

没有一个变通方法是好的。选项包括:

• 在span后添加一个零宽度的空格字符并选择它
• 使用<a>元素而不是<span>，因为WebKit对<a>元素会产生异常

Answer 2

我设法解决了这个问题，使用'a'标记与&nbsp。示例:- "<a>"+ content/element you want to add +"</a>&nbsp;"

Answer 3

这个函数管理我想要的东西:

<script type="text/javascript">
function pasteHtmlAtCaret(char) {
        var sel = rangy.getSelection();
        var range = sel.rangeCount ? sel.getRangeAt(0) : null;
        var parent;
        if (range) {
            var parentEl = document.createElement("span");
        jQuery(parentEl).addClass('char').addClass('latest');
            parentEl.appendChild(range.createContextualFragment(char));
            // Check if the cursor is at the end of the text in an existing span
            if (range.endContainer.nodeType == 3
            && (parent = range.endContainer.parentNode)
            && (parent.tagName == "SPAN")) {
            range.setStartAfter(parent);
            }
            range.insertNode(parentEl);
        if(jQuery(parentEl).parent().get(0).tagName.toLowerCase() == 'span'){
            var spanParent = jQuery(parentEl).parent('span');
            var parentEl = jQuery('<span class="char latest spanchild"></span>').insertAfter(spanParent).append(parentEl).get(0);
        }
        jQuery("span.spanchild").each(function(index, element){
            var content = jQuery(element).children('span.char').first().html();
            jQuery(element).children('span.char').remove();
            jQuery(element).html(content);
            jQuery(element).removeClass('spanchild');
        });
            range.setStartAfter(parentEl);
            rangy.getSelection().setSingleRange(range);
        jQuery(parentEl).removeClass('latest');
        }
}
</script>

Answer 4

仅span.contentEditable = false到Tim的解决方案工作正常;)