9

テキスト（文字列、htmlタグがある場合とない場合があります）をに挿入する方法はありますdivか？

である必要があり、 ではdivありませんtextarea。

まず、カーソル位置を取得し、その位置にテキストを挿入する必要があります。function に似ていますinsertAdjacentTextが、タグの前後にのみ挿入でき、IE でのみ機能します。

この URL を参照してください: http://yart.com.au/test/iframe.aspx。カーソルを div に配置する方法に注意してください。カーソル位置にテキストを追加する必要があります。

4

4 に答える 4

11

現在の選択/挿入ポイントに HTML を挿入するだけであれば、それは可能です。私の頭の上から（あなたを始めるために）：

  • IE では、 を使用しますdocument.selection.createRange().pasteHTML(theNewHTML)。
  • 他のブラウザでは、document.execCommand("InsertHTML", ...).

私はこれらの種類の手法を編集可能な iframe/ドキュメントでのみ使用し、div では使用しませんでしたが、これらの呼び出しは div がフォーカスされている場合に機能するはずです。

別の回答が警告したように、他の場所にテキストを挿入するなど、よりきめ細かい制御が必要な場合は醜くなります。

于 2008-10-31T14:36:57.273 に答える
7

Range オブジェクトと Selection オブジェクト

選択オブジェクトと範囲オブジェクトを使用します。これらには、現在の選択に関するあらゆる種類の情報と、ノード ツリー内の場所が含まれています。

公正な警告: あなたが説明していることを完全に実行することは不可能ではありませんが、非常に夢中になると、ブラウザーの癖や非互換性にかなり悩まされることになります。多くのオブジェクト検出を行う必要があり、値とメソッドが一貫していることを確認します。開発中は、すべてのブラウザを段階的にチェックしてください。幸運を！

于 2008-10-31T00:10:04.687 に答える
1

これは、この回答からiframeを操作するように適応されたクロスブラウザの例です。

function pasteHtmlAtCaret(html, selectPastedContent, iframe) {
    var sel, range;
    var win = iframe ? iframe.contentWindow : window;
    var doc = win.document;
    if (win.getSelection) {
        // IE9 and non-IE
        sel = win.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = doc.createElement("div");
            el.innerHTML = html;
            var frag = doc.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            var firstNode = frag.firstChild;
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                if (selectPastedContent) {
                    range.setStartBefore(firstNode);
                } else {
                    range.collapse(true);
                }
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        // IE < 9
        var originalRange = sel.createRange();
        originalRange.collapse(true);
        sel.createRange().pasteHTML(html);
        if (selectPastedContent) {
            range = sel.createRange();
            range.setEndPoint("StartToStart", originalRange);
            range.select();
        }
    }
}
于 2013-11-01T11:18:29.993 に答える