フォーカス後にコンテンツ編集可能な Div でカーソル位置を維持するにはどうすればよいですか?

編集可能なコンテンツ <div>

問題:

編集可能なコンテンツ <div>要素は、フォーカスが戻るたびにカーソル位置をテキストの先頭にリセットする傾向があります。これは、カーソルを以前の位置に戻す必要がある場合には望ましくない可能性があります。

解決策:

この問題に対処するには、次のクロスブラウザ ソリューションを使用できます:

ステップ 1: 選択内容を保存

イベント リスナー (onmouseup および onkeyup) を <div> にアタッチします。マウス ボタンを放したとき、またはキーを放したときに、現在のカーソル位置 (savedRange) をキャプチャします。

ステップ 2: 選択範囲を復元

ステップ 2 ( a): On Focus

イベント リスナー (onfocus) を <div> にアタッチします。以前に保存した選択内容を復元します。

ステップ 2 (b): クリック時 (オプション)

クリック時に選択内容を保持するには、追加の手順が必要です:

• クリック イベント (cancelEvent()) をキャンセルする onclick および onmousedown イベント リスナーを登録します。
• cancelEvent() 内で、保存された選択内容を復元し、isInFocus を true に設定します。
• ブラー (onblur) では、isInFocus を false に設定します。

完全なコード (クリック時の選択範囲の復元を含む):

<div>

var savedRange, isInFocus;

function saveSelection() {
  // ... (Selection saving logic as described in Step 1)
}

function restoreSelection() {
  isInFocus = true;
  document.getElementById("area").focus();

  if (savedRange != null) {
    // ... (Selection restoration logic as described in Step 2)
  }
}

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus === false && savedRange != null) {
    // ... (Event cancellation logic as described in Step 2 (b))
  }
}

以上がフォーカス後にコンテンツ編集可能な Div でカーソル位置を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。