5

contenteditable div 内に html タグを挿入する場合、新しく挿入された要素の外側 (右) にカーソルを移動する必要があるため、入力を続けると、新しいテキストはフォーマットされません。

Firefox では、このソリューションがうまく機能することがわかりました。

node = document.createElement("strong");
node.innerHTML = "test";

range.deleteContents();
range.insertNode(node);
range.collapse(false);

可変範囲は次のように設定されます。

if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
    }
}

上記のコードを Webkit ブラウザー (Chrome / Safari) で使用すると、カーソルが新しいタグの外側に配置されますが、左側に配置されます。

これ (Chrome / Safari) と IE サポート (主に 9、オプションで 8) の解決策はありますか?

ありがとう

=============================================

Tim のアドバイスに感謝します。これが実際のコードです。

var node = document.createElement("strong");
node.innerHTML = "test";

var space = document.createElement("span");
space.innerHTML = "\u200B";

range.insertNode(space);
range.insertNode(node);
range.collapse(false);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
4

1 に答える 1

6

Mozilla 以外のブラウザーでは範囲を再選択する必要があります。これは、IE <= 8 を除くすべての主要なブラウザーで機能します。

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

IE <= 8 の場合、別のアプローチを使用できます。完全な例を含む私の別の答えは次のとおりです。

https://stackoverflow.com/a/4836809/96100

于 2013-02-19T12:18:35.820 に答える