在满足div内的span元素后设置光标

如何在contenteditable div内的span元素后面设置光标？ 现在，我在span元素里面有一个图像，在contenteditable div里面。

当我添加一些字符时，它们被添加到span中，但我希望它们被添加到span元素之后。 任何想法我可以如何实现这一目标？

---

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

这些解决方法都不是很好。 选项包括：

在跨度后添加一个零宽度的空格字符并选择它

使用<a>元素而不是<span>因为WebKit为<a>元素设置了例外

---

这个功能管理我想到的：

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

---

对于Tim的解决方案，只需span.contentEditable = false ;）

链接地址: http://www.djcxy.com/p/92481.html

上一篇: Set cursor after span element inside contenteditable div

下一篇: API limit for Office365 REST APIs