javascript - 在 contenteditable div 内的 span 元素之后设置光标

Question

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

当我添加一些字符时，它们被添加到 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> 做了一个异常(exception)元素