Contenteditable DIV のキャレット位置に HTML を挿入するにはどうすればよいですか?-jsチュートリアル-php.cn

Contenteditable DIV のキャレット位置に HTML を挿入するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-10 00:19:02

オリジナル

348 人が閲覧しました

How to Insert HTML into a Contenteditable DIV at the Caret Position?

HTML を Contenteditable DIV のキャレット位置に挿入する

課題:

contenteditable div で、キープレスイベントキャプチャEnter キーが押されたときにテキストを入力できないようにするために使用できます。カーソルを目的の挿入ポイントに置き、HTML (
タグなど) をプレーンテキストとして表示せずに挿入する方法を探します。

解決策:

Range.pasteHTML() の使用は IE で機能しますが、他のブラウザでは HTML タグがテキストとして表示されます。次の関数を使用すると、すべての主要なブラウザに HTML を挿入でき、選択されている場合は既存のテキストを置き換えることができます。

function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt &amp;&amp; sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();

      // Create a document fragment from the HTML string
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment();
      while ((node = el.firstChild)) {
        frag.appendChild(node);
      }

      range.insertNode(frag);

      // Preserve the selection after the inserted content
      if (frag.lastChild) {
        range = range.cloneRange();
        range.setStartAfter(frag.lastChild);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection &amp;&amp; document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(html);
  }
}

ログイン後にコピー

機能強化 (2013 年 8 月):

への応答ユーザーのリクエストに応じて、挿入されたコンテンツを選択するかどうかを指定するパラメーターが追加されました。

function pasteHtmlAtCaret(html, selectPastedContent) {
  // Similar functionality as the original function
  // ...
}

ログイン後にコピー

この更新された関数により、HTML コンテンツを挿入した後の選択動作を制御できるようになります。

以上がContenteditable DIV のキャレット位置に HTML を挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。