4

contenteditabledivにタグを挿入するロジックがあります。挿入後、次の要素の先頭にカーソルを合わせたい。私がこれをしなければならないコードは次のとおりです：

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

ありがとう。

4

2 に答える 2

3

これは、WebKitの長年の厄介なバグです。より多くのアクティビティを持つ空のインライン要素内にキャレットを配置する特殊なケースのバグも参照してください。単一のゼロ幅スペース文字を挿入して選択することが許容されない限り、それについてできることは多くありません。

于 2011-12-05T00:57:46.183 に答える