Как переместить курсор к следующему элементу в contenteditable div в Chrome / Safari?

Question

У меня есть логика, чтобы вставить тег в contenteditable div.Я хочу установить курсор на начало следующего элемента после вставки.Код, который мне нужно сделать, это:

function insertNodeAtCaret(node) {
if(typeof window.getSelection !== 'undefined')
{
    var sel = window.getSelection();
    if(sel.rangeCount)
    {
        var rng = sel.getRangeAt(0);
        rng.collapse(false);
        rng.insertNode(node);

        // The following doesn't work in Chrome or Safari
        node = node.nextSibling;
        rng.setEndAfter(node);
        rng.setStartAfter(node);
        rng.collapse(true);
        sel.removeAllRanges();
        sel.addRange(rng);
    }
}
else if (typeof document.selection !== 'undefined' && document.selection.type !== 'Control')
{
    document.selection.createRange().pasteHTML(node.outerHTML);
}
}

Однако, хотя это прекрасно работает в IE, Opera и Firefox, оно не работает в Chrome и Safari.В Chrome / Safari курсор помещается в конец текста внутри промежутка, а не после промежутка.т.е.

<span>text CURSOR HERE</span>

вместо того, что я хочу, а именно:

<span>text</span>CURSOR HERE

Спасибо.

Answer 1

Это давняя и раздражающая ошибка в WebKit .См. Также ошибка для специального случая размещения каретки внутри пустого встроенного элемента , который обладает большей активностью.Вы ничего не можете с этим поделать, кроме случаев, когда допустимы вставка и выбор одного символа пробела нулевой ширины.