web-dev-qa-db-ja.com

コンテンツ編集可能なdivのカーソルにテキストを挿入

キャレット位置にテキストを挿入する必要があるコンテンツ編集可能なdivがあり、

これはIE by document.selection.createRange().text = "banana"で簡単に行うことができます。

Firefox/Chromeでこれを実装する同様の方法はありますか？

（私は解決策が存在することを知っています ここ 、しかしそれはcontenteditable divでは使用できず、不器用に見えます）

ありがとうございました！

javascriptcontenteditable
46
user314362

次の関数は、キャレット位置にテキストを挿入し、既存の選択を削除します。すべての主流のデスクトップブラウザーで動作します。

function insertTextAtCursor(text) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

[〜＃〜] update [〜＃〜]

コメントに基づいて、選択を保存および復元するためのコードを次に示します。コンテキストメニューを表示する前に、saveSelectionの戻り値を変数に保存し、その変数をrestoreSelectionに渡して、コンテキストメニューを非表示にしてテキストを挿入する前に選択を復元する必要があります。

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}
127
Tim Down
  1. window.getSelection()を使用して選択オブジェクトを取得します。
  2. Selection.getRangeAt(0).insertNode()を使用して、テキストノードを追加します。

  3. 必要に応じて、Selection.modify()を使用して、追加したテキストの後ろにカーソル位置を移動します。 （標準化されていませんが、この機能はFirefoxでサポートされていますChromeおよびSafari）

    function insertTextAtCursor(text)
{
    let selection = window.getSelection();
    let range = selection.getRangeAt(0);
    range.deleteContents();
    let node = document.createTextNode(text);
    range.insertNode(node);

    for(let position = 0; position != text.length; position++)
    {
        selection.modify("move", "right", "character");
    };
}
3
Martin Wantke
// <div contenteditable id="myeditable">
// const editable = document.getElementById('myeditable')
// editable.focus()
// document.execCommand('insertHTML', false, '<b>B</b>anana')
document.execCommand('insertText', false, 'banana')
1
alex_1948511