18

コンテンツ編集可能な DIV のオートコンプリートを作成しています (テキスト ボックスに HTML コンテンツをレンダリングする必要があるため、TEXTAREA よりも contenteditable DIV を使用することをお勧めします)。ここで、DIV にキーアップ/キーダウン/クリック イベントがあるときにカーソル位置を見つける必要があります。その位置にhtml/textを挿入できるようにします。何らかの計算でそれを見つける方法がわかりません。または、contententeditable DIV でカーソル位置を見つけるのに役立つネイティブブラウザー機能があります。

4

1 に答える 1

33

カーソル位置にコンテンツを挿入するだけであれば、その位置を明示的に見つける必要はありません。次の関数は、すべての主流のデスクトップ ブラウザーのカーソル位置に DOM ノード (要素またはテキスト ノード) を挿入します。

function insertNodeAtCursor(node) {
    var range, html;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

HTML 文字列を挿入する場合:

function insertHtmlAtCursor(html) {
    var range, node;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        node = range.createContextualFragment(html);
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
    }
}

アップデート

OP のコメントに従って、独自のRangyTextRangeライブラリを使用することをお勧めします。これは、DOM Range のように動作する IE オブジェクトにラッパーを追加します。DOM Rangeは、開始境界と終了境界で構成され、それぞれがノードとそのノード内のオフセットで表現され、Range を操作するための一連のメソッドが含まれます。MDCの記事では、いくつかの紹介を提供する必要があります。

于 2010-02-06T15:02:19.027 に答える