ContentEditable 要素のキャレット位置を取得するにはどうすればよいですか?

ContentEditable 要素内のキャレット位置を取得する

contentEditable 要素内のキャレット位置を取得するのは難しい場合がありますが、基礎となるテクニックを理解することは、インタラクティブなテキスト エディターを構築するために不可欠です。

キャレットの位置を決定するには、ブラウザのさまざまな機能に応じたいくつかのアプローチが存在します。一般的な方法の 1 つは、Firefox、Chrome、Safari などの最新のブラウザで Selection オブジェクトを利用することです。次のコード スニペットは、このアプローチを示しています。

function getCaretPosition(editableDiv) {
  var caretPos = 0;
  var sel = window.getSelection();
  if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    if (range.commonAncestorContainer.parentNode == editableDiv) {
      caretPos = range.endOffset;
    }
  }
  return caretPos;
}

Selection オブジェクトをサポートしていない古いブラウザの場合は、代わりに document.selection.createRange メソッドを使用できます。次のコードは、このアプローチを示しています。

function getCaretPosition(editableDiv) {
  var caretPos = 0;
  if (document.selection && document.selection.createRange) {
    var range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}

キャレット位置を取得したら、それを使用して次のようなさまざまなタスクを実行できます。

• キャレット位置を表示します。別の要素
• キャレット位置でテキスト操作操作を実行します
• カスタム テキスト編集を実装します機能

ブラウザごとに、キャレットの位置を正確に決定するために異なる手法が必要な場合があるため、ブラウザ間の互換性のためには、適切なアプローチを選択することが重要であることを覚えておいてください。

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