在contenteditable div中的span元素之后设置光标

Question

如何在一个contenteditable div中的span元素之后设置光标？现在,我在一个span元素里面有一个图像,在contenteditable 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>元素成为例外